SVG, vector-effect = "non-scaling-stroke" e IE

Question

A quanto ho capito, l'attributo SVG vector-effect="non-scaling-stroke" dovrebbe impedire che i tratti vengano distorti (resi più spessi o più sottili) se/quando l'oggetto SVG viene ridimensionato o allungato.

Ad esempio, in questo violino (http://jsfiddle.net/1cj0ovae/5/), ho due oggetti SVG; entrambi sono 5 volte più larghi di quanto siano alti. Poiché la casella di visualizzazione di entrambe le chiamate per un quadrato, gli SVG sono allungati e distorti.

Nell'alto di SVG - il percorso verde è distorto - è molto più spesso di quanto dovrebbe essere (stroke-width="2").

Nel file SVG inferiore, tuttavia, il percorso rosso viene visualizzato "correttamente" - un tratto di 2 px di spessore - perché ha il set di attributi vector-effect="non-scaling-stroke".

Questo sembra funzionare in Chrome, Safari e Firefox, ma non nelle versioni anche recenti di IE (ad es. IE10).

Si tratta di un bug di IE? C'è una soluzione?

Answer 1

effetti vettoriali fa parte di SVG 1.2 tiny e le prossime e non ancora completate specifiche SVG 2.

IE ha scelto solo SVG 1.1 che non ha effetti vettoriali. Altri UA hanno selezionato parti di SVG 1.2 minuscole come gli effetti vettoriali, ma nessuna corrente UA implementa tutto (Opera 12 credo).

Per aggirare il problema, capire quanto deve essere ampio il tratto utilizzando javascript. Cioè calcolare la differenza tra la trasformazione applicata alla forma e applicare l'inverso di essa alla larghezza del tratto. Non è semplice come ho trovato quando ho implementato questo in Firefox.