Feste Strichbreite in SVG

103

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?

wxs
quelle

Antworten:

128

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.

Erik Dahlström
quelle
1
Leider ist dies in einer XUL-App und das scheint den Vektoreffekt noch nicht zu unterstützen. Naja.
wxs
1
Dies sollte in Firefox 15 angezeigt werden, damit Sie es verwenden können, sobald Sie Ihre XUL-App auf Gecko 15 erstellt haben.
Robert Longson
2
IE11 unterstützt immer noch keine vector-effectEigenschaft. Ist es möglich, den gleichen Effekt wie vector-effect: non-scaling-strokein IE11 zu erzielen ?
Merlin
1
@merlin ja, mit js ist es möglich, dies im IE zu emulieren.
Erik Dahlström
3
@merlin klonen Sie das Element (Einstellung fillauf noneund umgekehrt für stroke), berechnen und setzen Sie die entsprechenden Transformationen (eine für den Füllteil und eine für den Strich). Es wird sicher ein wenig chaotisch sein, aber da ist es - vielleicht möchten Sie auch Microsoft bitten, Unterstützung dafür hinzuzufügen. Auf jeden Fall denke ich, dass Ihre Frage eine eigene Frage verdient.
Erik Dahlström