web-dev-qa-db-de.com

Feste Strichstärke in SVG

Ich möchte in der Lage sein, die Strichbreite eines SVG-Elements auf "Pixel-Aware" einzustellen, dh unabhängig von den aktuell angewendeten Skalierungstransformationen immer 1 Pixel breit zu sein. Mir ist bewusst, dass dies unmöglich sein kann, da der springende Punkt von SVG darin besteht, pixelunabhängig zu sein.

Kontext folgt:

Ich habe ein SVG-Element mit seinen Attributen viewBox und preserveAspectRatio. Es sieht ungefähr so ​​aus

<svg version="1.1" baseProfile="full"
    viewBox="-100 -100 200 200" preserveAspectRatio="xMidYMid meet"
    xmlns="http://www.w3.org/2000/svg" >
</svg>

Das heißt, wenn ich das Element skaliere, werden die tatsächlichen Formen darin entsprechend skaliert (soweit so gut).

Wie Sie sehen, habe ich die viewBox so eingerichtet, dass der Ursprung in der Mitte liegt. Ich möchte eine x- und eine y-Achse innerhalb dieses Elements zeichnen, was ich so mache:

<line x1="-1000" x2="1000" y1="0" y2="0" />

Auch dies funktioniert gut. Im Idealfall wäre diese Achse jedoch immer nur 1px breit. Ich habe kein Interesse daran, dass die Achsen dicker werden, wenn ich das übergeordnete SVG-Element skaliere.

Also bin ich beschissen?

96
wxs

Sie können die Eigenschaft vector-effect Verwenden, die auf non-scaling-stroke Festgelegt ist (siehe the docs ). Eine andere Möglichkeit ist die Verwendung von transform(ref) .

Dies funktioniert in Browsern, die diese Teile von SVG Tiny 1.2 unterstützen, z. B. Opera 10). Der Fallback umfasst das Schreiben eines kleinen Skripts, um dasselbe zu tun, indem das CTM im Grunde invertiert und auf die Elemente angewendet wird das sollte nicht skalieren.

Wenn Sie schärfere Linien wünschen, können Sie auch Antialiasing deaktivieren (shape-rendering=optimizeSpeed Oder shape-rendering=crispEdges) Und/oder mit der Positionierung spielen.

118
Erik Dahlström