Feste Strichbreite in SVG

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

Der Kontext folgt:

Ich habe ein SVG-Element mit den Attributen viewBox underveAspectRatio. 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 bedeutet, wenn ich dieses Element skaliere, werden die tatsächlichen Formen darin entsprechend skaliert (soweit so gut).

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

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

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

Also bin ich geschraubt?

Sie können den vector-effectEigenschaftssatz verwenden non-scaling-stroke, siehe Dokumente . Ein anderer Weg ist zu verwenden 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. Im Grunde wird das CTM invertiert und auf die Elemente angewendet, die nicht skaliert werden sollen.

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