Larghezza del tratto fissa in SVG

103

Vorrei essere in grado di impostare la larghezza del tratto su un elemento SVG in modo che sia "sensibile ai pixel", ovvero sia sempre 1px di larghezza indipendentemente dalle trasformazioni di ridimensionamento correnti applicate. Sono consapevole che questo potrebbe essere impossibile, poiché l'intero scopo di SVG è essere indipendente dai pixel.

Segue il contesto:

Ho un elemento SVG con i suoi attributi viewBox e keepAspectRatio impostati. Sembra qualcosa del genere

<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 ridimensiono quell'elemento, le forme effettive al suo interno vengono ridimensionate di conseguenza (finora tutto bene).

Come puoi vedere, ho impostato il viewBox in modo che l'origine sia al centro. Vorrei disegnare un asse x e y all'interno di quell'elemento, cosa che faccio in questo modo:

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

Di nuovo, funziona bene. Idealmente, tuttavia, questo asse sarebbe sempre largo solo 1 px. Non ho alcun interesse che gli assi si ingrassino quando ridimensiono l'elemento svg genitore.

Quindi sono fottuto?

svg visualization

— WXS
fonte

128

È possibile utilizzare la vector-effectproprietà impostata su non-scaling-stroke, vedere la documentazione . Un altro modo è usare transform(ref).

Ciò funzionerà nei browser che supportano quelle parti da SVG Tiny 1.2, ad esempio Opera 10. Il fallback include la scrittura di un piccolo script per fare lo stesso, fondamentalmente invertendo il CTM e applicandolo agli elementi che non dovrebbero ridimensionarsi.

Se vuoi linee più nitide puoi anche disabilitare l'antialiasing ( shape-rendering=optimizeSpeedo shape-rendering=crispEdges) e / o giocare con il posizionamento.

— Erik Dahlström
fonte

Sfortunatamente questo è in un'app XUL e non sembra ancora supportare l'effetto vettoriale. Oh bene.

— wxs

Questo dovrebbe apparire in Firefox 15 tutto a posto, quindi dovresti essere in grado di usarlo una volta

— creata la

IE11 ancora non supporta la vector-effectproprietà. È possibile ottenere lo stesso effetto vector-effect: non-scaling-strokedi IE11?

— Merlin

@merlin sì, con js è possibile emularlo in IE.

— Erik Dahlström

@merlin clona l'elemento (impostando fillsu nonee viceversa per il stroke), calcola e imposta le trasformazioni appropriate (una per la parte di riempimento e una per la parte di tratto). Sarà sicuramente un po 'complicato, ma è così: potresti anche chiedere a Microsoft di aggiungere il supporto per questo. In ogni caso penso che la tua domanda meriti di essere una questione a sé stante.

— Erik Dahlström