1193586 - SVG pattern with patternTransform has its tiles clipped incorrectly

Status: RESOLVED FIXED

(Core :: SVG, defect)

Description

[Cameron McCormack (:heycam)]

Actually I am not sure if it is clipped incorrectly, but it is clipped differently from Chrome.  I don't think this is just an issue of overflow="visible" on <pattern> being undefined.

Comment 1

[mebane]

Although it would be nice to see this bug fixed, I would like to point out that this bug does not occur if the viewBox's position (first two arguments) is at the origin. That suggests a workaround. For the SVG attached to this bug report, you can avoid the clipping by changing the viewBox to "0 0 559.8 136.6" and then wrapping the pattern contents in <g transform="translate(-93.3 -93.3)">.

In other browsers, this has no effect on the rendering in the cases I have tested. However Firefox does shift the pattern around beyond just removing the clipping.

Comment 2

[smigen1]

The original reference doesn't exist now. We came across this bug and here's an example of fixing it:

Broken SVG (Firefox doesn't match Chrome/Inkscape):

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="0 0 5669 5669">

	<pattern width="2258.997" height="1289.823" patternUnits="userSpaceOnUse" id="pattern" 
		viewBox="752.999 0 2258.997 1289.823" patternTransform="matrix(0.5,0,0,0.5,0,0)">
		
		<g transform="translate(0,1934.735)">
			<rect x="752.999" y="-1934.735" fill="none" stroke="black" stroke-width="10" width="2258.997" height="1289.823"/>
			<circle cx="1882.4975" cy="-1289.8235" r="644.9115" fill="none" stroke="black" stroke-width="10" />
		</g>
	</pattern>

	<rect width="100%" height="100%"  fill="url(#pattern)" />
</svg>

Fixed SVG:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="0 0 5669 5669">
    <!-- set viewBox first (x) value to 0 -->
	<pattern width="2258.997" height="1289.823" patternUnits="userSpaceOnUse" id="pattern" 
		viewBox="0 0 2258.997 1289.823" patternTransform="matrix(0.5,0,0,0.5,0,0)">
	    <!-- prepend viewBox negative x translate -->
		<g transform="translate(-752.999, 0)       translate(0,1934.735)">
			<rect x="752.999" y="-1934.735" fill="none" stroke="black" stroke-width="10" width="2258.997" height="1289.823"/>
			<circle cx="1882.4975" cy="-1289.8235" r="644.9115" fill="none" stroke="black" stroke-width="10" />
		</g>
	</pattern>

	<rect width="100%" height="100%"  fill="url(#pattern)" />
</svg>

The original looks the same in Inkscape and Chrome, but not Firefox or Illustrator.

Comment 3

[Robert Longson [:longsonr]]

Attachment: original reference

Comment 4

[Robert Longson [:longsonr]]

Attachment: Fixed SVG

Comment 5

[Robert Longson [:longsonr]]

Attachment: Bug 1193586 - Fix scaling of patterns with viewBoxes that are not at the origin r=emilio

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/b5806e6bb8f7
Fix scaling of patterns with viewBoxes that are not at the origin r=emilio

Comment 7

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/b5806e6bb8f7

Comment 8

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/39731 for changes under testing/web-platform/tests

Comment 9

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot