cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

SVG vector-effect="non-scaling-stroke" no longer working after v127

developersheff
Making moves

vector-effect="non-scaling-stroke" should allow a stroke to be a set size and not scale with the SVG. This was working but stopped working with the release of v127.

7 REPLIES 7

developersheff
Making moves

Steps to recreate the issue:

Create these 2 HTML files and open them both in Firefox 127.

Notice the second HTML file has a nested SVG tag and that this has an effect on the thickness of the stroke despite being set as non-scaling.

<html>
<head></head>
<body>
<svg xmlns="http://www.w3.org/2000/svg"  preserveAspectRatio="xMidYMin meet" viewBox="0 0 4004 1004">
	<rect  x="10" y="10" width="3990" height="990" fill="yellow" stroke="red" stroke-width="1" vector-effect="non-scaling-stroke"></rect>
</svg>
</body>
</html>
<html>
<head></head>
<body>
<svg xmlns="http://www.w3.org/2000/svg"  preserveAspectRatio="xMidYMin meet" viewBox="0 0 4004 1004">
	<svg>
	<rect  x="10" y="10" width="3990" height="990" fill="yellow" stroke="red" stroke-width="1" vector-effect="non-scaling-stroke"></rect>
	</svg>
</svg>
</body>
</html>

This was not the behaviour prior to Firefox 127.

 

The description in the SVG 2 spec has been superseded by a gihub issue. Firefox 129 will implement the pre-127 behaviour.

longsonr
Making moves

I think Firefox is right per the SVG specification i.e.

https://www.w3.org/TR/SVG/coords.html#VectorEffects

vector-effect defaults to viewport (and Firefox only supports viewport anyway, I suspect other viewers do to i.e. nobody supports screen)

Per https://www.w3.org/TR/SVG/coords.html#EstablishingANewSVGViewport an <svg> element establishes a new viewport.

And then for viewport...

viewport
Specifies immediate viewport coordinate system as the host coordinate space. When that element belongs to nested viewport coordinate system, vector effects are applied toward viewport coordinate system to which that element belongs directly. That is, that vector effect is not effective for change of CTM on ancestral viewport coordinate system.

You would seem to be asking for the default to be screen rather than viewport but it isn't.

https://www.w3.org/TR/SVG/painting.html#non-scaling-stroke


a user agent establishes a host coordinate space which in SVG Tiny 1.2 is always the same as "screen coordinate space"

Previously Firefox interpreted this as meaning that nested SVG's had no effect on the host coordinate space.

The description in the SVG 2 spec has been superseded by a gihub issue. Firefox 129 will implement the pre-127 behaviour.

The description in the SVG 2 spec has been superseded by a gihub issue. Firefox 129 will implement the pre-127 behaviour via bug 1903546

RichardU
Making moves

There still appears to be a problem with 129 - it appears to be using physical screen pixels rather than virtual screen pixels. It's noticeable as when you change the display zoom (larger text/more space) on a mac as the lines remain the same thickness relative to the physical screen, but change relative to the browser.

Note that this only applies to SVGs embedded with <img>, not inline for some reason.