Bug 105904 - SVG external use doesn't work with animation, gradients, filters
Summary: SVG external use doesn't work with animation, gradients, filters
Status: UNCONFIRMED
Alias: None
Product: WebKit
Classification: Unclassified
Component: SVG (show other bugs)
Version: 528+ (Nightly build)
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2013-01-01 16:47 PST by Ramsey
Modified: 2017-11-21 03:46 PST (History)
2 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Ramsey 2013-01-01 16:47:45 PST
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.
Comment 1 Ryan Wilke 2017-11-21 03:46:48 PST
Seeing this same issue as well. The new Firefox renders everything fine, but Chrome and Safari do not.