Derzeit wird eine browserbasierte SVG-Anwendung erstellt. Innerhalb dieser App können verschiedene Formen vom Benutzer gestaltet und positioniert werden, einschließlich Rechtecke.
Wenn ich a stroke-width
auf ein SVG- rect
Element von beispielsweise anwende 1px
, wird der Strich rect
von verschiedenen Browsern auf unterschiedliche Weise auf den Versatz und den Einschub des Strichs angewendet . Dies erweist sich als problematisch, insbesondere wenn ich versuche, die äußere Breite und die visuelle Position eines Rechtecks zu berechnen und neben anderen Elementen zu positionieren.
Beispielsweise:
- Firefox fügt einen 1-Pixel-Einschub (unten und links) und einen 1-Pixel-Versatz (oben und rechts) hinzu.
- Chrome fügt einen 1-Pixel-Einschub (oben und links) und einen 1-Pixel-Versatz (unten und rechts) hinzu.
Meine bisher einzige Lösung wäre, die tatsächlichen Ränder selbst zu zeichnen (wahrscheinlich mit dem path
Werkzeug) und die Ränder hinter dem gestrichenen Element zu positionieren. Aber diese Lösung ist eine unangenehme Problemumgehung, und ich würde es vorziehen, diesen Weg nicht zu gehen, wenn dies möglich ist.
Meine Frage ist also, können Sie steuern, wie eine SVG stroke-width
auf Elementen gezeichnet wird?
paint-order
Parameter, in dem Sie angeben können, dass die Füllung über dem Strich gerendert werden soll, damit Sie die "äußere Ausrichtung" erhalten, siehe jsfiddle.net/hne0kyLg/1Antworten:
Nein, Sie können nicht angeben, ob der Strich innerhalb oder außerhalb eines Elements gezeichnet wird. Ich habe der SVG-Arbeitsgruppe 2003 einen Vorschlag für diese Funktionalität unterbreitet , der jedoch keine Unterstützung (oder Diskussion) erhielt.
Wie ich im Vorschlag festgestellt habe,
Bearbeiten : Diese Antwort könnte in Zukunft falsch sein. Es sollte möglich sein, diese Ergebnisse mit SVG-Vektoreffekten zu erzielen , indem sie
veStrokePath
mitveIntersect
(für 'innen') oder mitveExclude
(für 'außen ') kombiniert werden . Vector Effects ist jedoch immer noch ein funktionierendes Entwurfsmodul ohne Implementierungen, die ich noch finden kann.Bearbeiten 2 : Die SVG 2-Entwurfsspezifikation enthält eine
stroke-alignment
Eigenschaft (mit Mitte | innerhalb | außerhalb möglicher Werte). Diese Eigenschaft kann es schließlich in UAs schaffen.Edit 3 : Amüsanterweise und enttäuschend hat sich die SVG-Arbeitsgruppe
stroke-alignment
aus SVG 2 entfernt . Sie können einige der nach der Prosa beschriebenen Bedenken hier sehen .quelle
UPDATE: Das
stroke-alignment
Attribut wurde am 1. April 2015 auf eine völlig neue Spezifikation namens SVG Strokes verschoben .Ab dem Entwurf des SVG 2.0-Editors vom 26. Februar 2015 (und möglicherweise seit dem 13. Februar )
Dasmit den Wertenstroke-alignment
Anwesen ist vorhandeninner
,center
(default) undouter
.Es scheint genauso zu funktionieren wie die
stroke-location
von @Phrogz vorgeschlagene Eigenschaft und der späterestroke-position
Vorschlag . Diese Eigenschaft ist seit mindestens 2011 geplant, aber abgesehen von einer Anmerkung, die besagteEs wurde in der Spezifikation nie detailliert beschrieben, da es verschoben wurde - bis jetzt scheint es.
Kein Browser unterstützt diese Eigenschaft oder, soweit ich weiß, noch eine der neuen SVG 2-Funktionen, aber hoffentlich werden sie bald verfügbar sein, wenn die Spezifikation ausgereift ist. Dies war eine Immobilie, auf die ich persönlich gedrängt habe, und ich bin wirklich froh, dass sie endlich in der Spezifikation enthalten ist.
Es scheint einige Probleme zu geben, wie sich die Eigenschaft auf offenen Pfaden und Schleifen verhalten soll. Diese Probleme werden höchstwahrscheinlich die Implementierung in allen Browsern verlängern. Ich werde diese Antwort jedoch mit neuen Informationen aktualisieren, sobald Browser diese Eigenschaft unterstützen.
quelle
stroke-alignment
wird in SVG Strokes, einem W3C-Arbeitsentwurf, angegeben. In der Zwischenzeit heißt es im Entwurf des SVG 2 W3C-Editors, dass eine Strichpositionierungseigenschaft in der SVG-Spezifikation unter svgwg.org/svg2-draft/painting.html#SpecifyingStrokePaint enthalten sein soll, diese Spezifikation jedoch bereits den W3C-Kandidatenempfehlungsstatus erreicht hat und keine solche Eigenschaft vorliegt Abgesehen von einem Link zumstroke-position
Vorschlag ist dies in der Spezifikation nicht der Fall.Ich habe einen einfachen Weg gefunden, der einige Einschränkungen aufweist, aber für mich funktioniert hat:
Hier ein Arbeitsbeispiel:
quelle
<use>
? Warum nicht einfach den Pfad und den Clip-Pfad direkt eingeben? Das funktioniert gut :<svg width="240" height="240" viewBox="0 0 1024 1024"> <path id="ld" d="M256,0 L0,512 L384,512 L128,1024 L1024,384 L640,384 L896,0 L256,0 Z" clip-path="url(#clip)" stroke="#0081C6" stroke-width="160" fill="#00d2b8"/> <clipPath id="clip"> <use xlink:href="#ld"/> </clipPath> </svg>
. (Ja, dies ist völlig vernünftig und korrekt. SVG wird überall korrekt wiedergegeben. Fürchte keine Rekursion.)Sie können CSS verwenden, um die Reihenfolge von Strichen und Füllungen zu gestalten. Das heißt, zuerst streichen und dann füllen, um den gewünschten Effekt zu erzielen.
MDN unter
paint-order
: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/paint-orderCSS-Code:
quelle
Hier ist eine Funktion, die berechnet, wie viele Pixel Sie mithilfe des angegebenen Strichs oben, rechts, unten und links hinzufügen müssen, basierend auf dem Browser:
quelle
Wie oben erwähnt, müssen Sie entweder einen Versatz zu den Pfadkoordinaten des Strichs neu berechnen oder seine Breite verdoppeln und dann die eine oder andere Seite maskieren, da SVG nicht nur die Strichausrichtung von Illustrator nicht nativ unterstützt, PostScript auch nicht .
Die Spezifikation für Anschläge in Adobe Postscript - Handbuch 2. Ausgabe heißt es : " 4.5.1 Streicheln: Der Schlaganfall Bediener zieht eine Linie von einem gewissen Dicke entlang des Strompfades für jedes geraden oder gebogenes Segment im Weg. Schlaganfall eine Linie zieht , die sich mittig auf das Segment mit parallelen Seiten zum Segment. " (Hervorhebung ihrer)
Der Rest der Spezifikation enthält keine Attribute zum Versetzen der Position der Linie. Wenn Sie mit Illustrator innen oder außen ausrichten können, wird der tatsächliche Pfadversatz neu berechnet (da er immer noch rechnerisch billiger ist als Überdrucken und dann Maskieren). Die Pfadkoordinaten im .ai-Dokument sind Referenzdaten und nicht das, was gerastert oder in ein endgültiges Format exportiert wird.
Da das native Format von Inkscape die Spezifikation SVG ist, kann es keine Funktion bieten, die der Spezifikation fehlt.
quelle
Hier ist eine Problemumgehung für die innere Begrenzung
rect
mitsymbol
unduse
.Beispiel : https://jsbin.com/yopemiwame/edit?html,output
SVG :
Hinweis: Stellen Sie sicher , ersetzen die
?
inuse
mit realen Werten.Hintergrund : Der Grund , warum dies funktioniert , ist , weil Symbol ein neues Ansichtsfenster stellt durch Austausch
symbol
mitsvg
und ein Element im Schatten DOM zu schaffen. Diesessvg
des Schatten-DOM wird dann mit Ihrem aktuellenSVG
Element verknüpft . Beachten Sie, dasssvg
s verschachtelt werden kann und jedessvg
ein neues Ansichtsfenster erstellt, das alles überlappt, was sich überlappt, einschließlich des überlappenden Rahmens. Für einen viel detaillierteren Überblick über das Geschehen lesen Sie diesen fantastischen Artikel von Sara Soueidan.quelle
Ich weiß nicht, wie hilfreich das sein wird, aber in meinem Fall habe ich nur einen weiteren Kreis mit nur Rand erstellt und ihn „innerhalb“ der anderen Form platziert.
quelle
Eine (schmutzige) mögliche Lösung ist die Verwendung von Mustern,
Hier ist ein Beispiel mit einem innen gestrichenen Dreieck:
https://jsfiddle.net/qr3p7php/5/
quelle
Die Lösung von Xavier Ho, die Breite des Strichs zu verdoppeln und die Farbreihenfolge zu ändern, ist brillant, funktioniert jedoch nur, wenn die Füllung einfarbig und ohne Transparenz ist.
Ich habe einen anderen Ansatz entwickelt, der komplizierter ist, aber für jede Füllung funktioniert. Es funktioniert auch in Ellipsen oder Pfaden (bei letzteren gibt es einige Eckfälle mit seltsamem Verhalten, zum Beispiel offene Pfade, die sich kreuzen, aber nicht viel).
Der Trick besteht darin, die Form in zwei Ebenen anzuzeigen. Eine ohne Strich (nur Füllung) und eine andere nur mit Strich bei doppelter Breite (transparente Füllung) und durch eine Maske geführt, die die gesamte Form zeigt, aber die ursprüngliche Form ohne Strich verbirgt.
quelle