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.

6 REPLIES 6

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.

 

because vector-effect should default to viewport so the previous behaviour was incorrect.

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.

It did and that was wrong. We're not implementing SVG Tiny 1.2 (which does not allow nested svg anyway), we're implementing SVG 2.

bug 1404891 - https://bugzilla.mozilla.org/show_bug.cgi?id=1904891 will implement the screen option. That will give you pretty much the same results as Firefox's previous behaviour.

vector-effect: non-scaling-stroke screen;