Larghezza della corsa fissa in SVG

Question

Mi piacerebbe essere in grado di impostare la larghezza del tratto su un elemento SVG in modo che sia "pixel-aware", che sia sempre 1px wide indipendentemente dalle trasformazioni di ridimensionamento correnti applicate. Sono consapevole che questo potrebbe essere impossibile, dal momento che l'intero punto di SVG deve essere indipendente dal pixel.

Contesto segue:

Ho un elemento SVG con la sua viewBox e preserveAspectRatio attributi impostati. Sembra qualcosa di simile

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

Ciò significa che quando mi scala quell'elemento, le forme effettive al suo interno scala di conseguenza (fin qui tutto bene).

Come potete vedere, ho impostato il viewBox in modo che l'origine sia al centro. Vorrei disegnare un x e un asse y all'interno di tale elemento, che faccio così:

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

Di nuovo, questo funziona bene. Idealmente, tuttavia, questo asse sarebbe sempre largo solo 1px. Non mi interessa che gli assi diventino più grassi quando scala l'elemento svg genitore.

Quindi sono fregato?

Answer 1

È possibile utilizzare la proprietà vector-effect impostata su non-scaling-stroke, vedere the docs. Un altro modo è utilizzare transform(ref).

Che funzionerà in browser che supportano quelle parti di SVG Tiny 1.2, ad esempio Opera 10. Il fallback include la scrittura di un piccolo script per fare lo stesso, in pratica invertendo il CTM e applicandolo sugli elementi che non dovrebbero scalare .

Se si desidera linee più nitide è anche possibile disable antialiasing (shape-rendering=optimizeSpeed o shape-rendering=crispEdges) e/o giocare con il posizionamento.