Bug 105904 – SVG external use doesn't work with animation, gradients, filters

• Component: SVG
• Status: RESOLVED CONFIGURATION CHANGED

[Ramsey]

This works in webkit.

--File name: drawing-9.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dc="http://purl.org/dc/elements/1.1/">
	<defs>
		<path id="petal" d="M8,6.5s-2-3.5-1-5.5c0.5-1,1.5-1,2,0,1,2-1,5.5-1,5.5z" fill="#000"/>
	</defs>
	<g id="flower">
		<use xlink:href="#petal" height="16" width="16" y="0" x="0"/>
		<use opacity="0.9" xlink:href="#petal" transform="matrix(0.70710678,-0.70710678,0.70710678,0.70710678,-3.3137085,8)" height="16" width="16" y="0" x="0"/>
		<use opacity="0.8" xlink:href="#petal" transform="matrix(0,-1,1,0,0,16)" height="16" width="16" y="0" x="0"/>
		<use opacity="0.7" xlink:href="#petal" transform="matrix(-0.70710678,-0.70710678,0.70710678,-0.70710678,8,19.313708)" height="16" width="16" y="0" x="0"/>
		<use opacity="0.6" xlink:href="#petal" transform="matrix(-1,0,0,-1,16,16)" height="16" width="16" y="0" x="0"/>
		<use opacity="0.5" xlink:href="#petal" transform="matrix(-0.70710678,0.70710678,-0.70710678,-0.70710678,19.313708,8)" height="16" width="16" y="0" x="0"/>
		<use opacity="0.4" xlink:href="#petal" transform="matrix(0,1,-1,0,16,0)" height="16" width="16" y="0" x="0"/>
		<use opacity="0.3" xlink:href="#petal" transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,8,-3.3137085)" height="16" width="16" y="0" x="0"/>
		<animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0,8,8;45,8,8;90,8,8;135,8,8;180,8,8;225,8,8;270,8,8;315,8,8;360,8,8" keyTimes="0;0.125;0.25;0.375;0.5;0.625;0.75;0.875;1" begin="0s" dur="1s" repeatCount="indefinite" calcMode="discrete" />
	</g>
</svg>


This does not work in webkit. This works in Firefox and Opera.

--File name: drawing-9defs.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dc="http://purl.org/dc/elements/1.1/">
	<defs>
		<path id="petal" d="M8,6.5s-2-3.5-1-5.5c0.5-1,1.5-1,2,0,1,2-1,5.5-1,5.5z" fill="#000"/>
		<g id="flower">
			<use xlink:href="#petal" height="16" width="16" y="0" x="0"/>
			<use opacity="0.9" xlink:href="#petal" transform="matrix(0.70710678,-0.70710678,0.70710678,0.70710678,-3.3137085,8)" height="16" width="16" y="0" x="0"/>
			<use opacity="0.8" xlink:href="#petal" transform="matrix(0,-1,1,0,0,16)" height="16" width="16" y="0" x="0"/>
			<use opacity="0.7" xlink:href="#petal" transform="matrix(-0.70710678,-0.70710678,0.70710678,-0.70710678,8,19.313708)" height="16" width="16" y="0" x="0"/>
			<use opacity="0.6" xlink:href="#petal" transform="matrix(-1,0,0,-1,16,16)" height="16" width="16" y="0" x="0"/>
			<use opacity="0.5" xlink:href="#petal" transform="matrix(-0.70710678,0.70710678,-0.70710678,-0.70710678,19.313708,8)" height="16" width="16" y="0" x="0"/>
			<use opacity="0.4" xlink:href="#petal" transform="matrix(0,1,-1,0,16,0)" height="16" width="16" y="0" x="0"/>
			<use opacity="0.3" xlink:href="#petal" transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,8,-3.3137085)" height="16" width="16" y="0" x="0"/>
			<animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0,8,8;45,8,8;90,8,8;135,8,8;180,8,8;225,8,8;270,8,8;315,8,8;360,8,8" keyTimes="0;0.125;0.25;0.375;0.5;0.625;0.75;0.875;1" begin="0s" dur="1s" repeatCount="indefinite" calcMode="discrete" />
		</g>
	</defs>
</svg>

--File name: drawing-9ext.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" height="112" width="64" version="1.1">
	<use xlink:href="drawing-9defs.svg#flower" x="0" y ="0"/>
</svg>

The svg status page (http://www.webkit.org/projects/svg/status.xml) says the use element is implemented.  I have other examples where external use fails for webkit, but works great in mozilla and presto (https://github.com/nullterminated/ponder/tree/master/ERR2d2w/WebServerResources/img).  Inner shadows, drop shadows, gradients... 

Lots of things fail with external use. Webkit 12499 was closed as resolved, but these issues persist. It would be nice if the svg status page mention these failings and list use in yellow until the problems are fixed.

[Ryan Wilke]

Seeing this same issue as well. The new Firefox renders everything fine, but Chrome and Safari do not.

[Brent Fulgham]

Created attachment 460945 [details]
drawing-9.svg

[Brent Fulgham]

Created attachment 460946 [details]
drawing9-defs.svg

[Brent Fulgham]

The content of attachment 460946 [details] has been deleted

[Brent Fulgham]

Created attachment 460947 [details]
drawing-9defs.svg

[Brent Fulgham]

Created attachment 460948 [details]
drawing-9ext.svg

[Brent Fulgham]

I might have made a mistake copying/pasting the content to create the files, but both cases seem to work the same way in Firefox, Chrome, and Safari (as of 2022).

Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue.