问题描述
由于某些原因,当使用 xlink:href
时,spinner.svg没有设置动画。如下页所示,将SVG嵌入页面并使用 xlink:href
似乎可以正常工作。
问题:静态(稳定!)微调器而不是动画
为什么SVG的动画标签突然不起作用?由于图像实际上在显示,因此引用必须有效。
> 编辑:这与阴影dom和外部参照有关吗?
目标元素必须是一部分当前SVG文档片段的名称。我可能超载了文档片段的含义,但对我来说文档片段属于Shadow DOM领域,并且我怀疑使用< use>
时SMIL动画可能无法正常工作
工作版本
.xlinked {颜色:绿色;} img {颜色:红色; //无效-当然! }。嵌入{{color:blue;}
< h1> xlink本地< / h1>< svg class = xlinked> <!-无法获得此外部参考吗? <使用xlink:href = http://imgh.us/spinner_1.svg /> -> <使用xlink:href =#spinner />< / svg>< h1>嵌入式< / h1>< div class = embedded> < svg id =嵌入式 xmlns = http://www.w3.org/2000/svg viewBox = 0 0 100 100 reserveAspectRatio = xMidYMid> < circle cx = 50 cy = 50 r = 45 stroke = rgba(43,43,43,0.3) fill = none stroke-width = 10 stroke-linecap = round /> < circle cx = 50 cy = 50 r = 45 stroke = currentColor fill = none stroke-width = 6 stroke-linecap = round> < animate attributeName = stroke-dashoffset dur = 2s repeatCount = indefinite从= 0到= 502 /> < animate attributeName = stroke-dasharray dur = 2s repeatCount = indefinite values = 150.6 100.4; 1,250; 150.6 100.4 /> < / circle> < / svg>< / div>< h1> img< / h1>< img src = http://imgh.us/spinner_1.svg />< h1>外部绝对xlink(无效) )/ h1< svg> <!-无法获得此外部参考。应该与本地参考相同吗? -> <使用xlink:href = http://imgh.us/spinner_1.svg />< / svg>< h1>源SVG,带有用于xlink参考的符号< / h1>< svg xmlns = http://www.w3.org/2000/svg\"><符号id = spinner viewBox = 0 0 100 100 serveAspectRatio = xMidYMid><圆圈cx = 50 cy = 50 r = 45 stroke = rgba(43,43,43,0.3) fill = none stroke-width = 10 stroke-linecap = round /><圆cx = 50 cy = 50 r = 45 stroke = currentColor fill = none stroke-width = 6 stroke-linecap = round>< animate attributeName = stroke-dashoffset dur = 2s repeatCount = indefinite从= 0到= 502 /><动画attributeName = stroke-dasharray dur = 2s repeatCount = indefinite values = 150.6 100.4; 1 250; 150.6 100.4 />< / circle>< / symbol>< / svg>
在SVG1.1中,Use元素要求引用SVG片段而不是SVG URL。尝试将id属性添加到外部SVG文件的根svg元素,并将哈希字符串添加到use元素的href值,像这样。
external svg(spinner_1.svg)
< svg xmlns = http://www.w3.org/2000/svg id = root>
<!-svg结构->
< / svg>
html使用外部SVG文件
< svg>
< use xlink:href = http://imgh.us/spinner_1.svg#root />
< / svg>
注意:在SVG2中,可以将SVG URL设置为use元素的href属性。参见
For some reason my spinner.svg is not animating when using xlink:href
. Embedding the SVG on the page and using xlink:href
seems to work fine, as the snippet below shows.
The problem: static (and solid!) spinner instead of animation
Why are the animation tags of the SVG suddenly not taking effect? The reference must be working since the image is actually displaying.
EDIT: Could this have to do with the shadow dom and xref?According to Sara Soueidan "The target element must be part of the current SVG document fragment". I might be overloading what "document fragment" means, but to me document fragments belong in Shadow DOM land, and I suspect that SMIL animations might not work when using <use>
statements due to this?
Working versions
.xlinked {
color: green;
}
img {
color: red; // not taking effect - of course! just a test.
}
.embedded {
color: blue;
}
<h1>xlink local</h1>
<svg class="xlinked">
<!-- could not get this external reference to work?
<use xlink:href="http://imgh.us/spinner_1.svg" />
-->
<use xlink:href="#spinner" />
</svg>
<h1>embedded</h1>
<div class="embedded">
<svg id="embedded" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<circle cx="50" cy="50" r="45" stroke="rgba(43,43,43,0.3)" fill="none" stroke-width="10" stroke-linecap="round"/>
<circle cx="50" cy="50" r="45" stroke="currentColor" fill="none" stroke-width="6" stroke-linecap="round">
<animate attributeName="stroke-dashoffset" dur="2s" repeatCount="indefinite" from="0" to="502"/>
<animate attributeName="stroke-dasharray" dur="2s" repeatCount="indefinite" values="150.6 100.4;1 250;150.6 100.4"/>
</circle>
</svg>
</div>
<h1>img</h1>
<img src="http://imgh.us/spinner_1.svg" />
<h1>External absolute xlink (not working)</h1>
<svg>
<!-- could not get this external reference to work. should be the same as a local reference? -->
<use xlink:href="http://imgh.us/spinner_1.svg" />
</svg>
<h1>Source SVG with symbols for xlink reference </h1>
<svg xmlns="http://www.w3.org/2000/svg"><symbol id="spinner" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><circle cx="50" cy="50" r="45" stroke="rgba(43,43,43,0.3)" fill="none" stroke-width="10" stroke-linecap="round"/><circle cx="50" cy="50" r="45" stroke="currentColor" fill="none" stroke-width="6" stroke-linecap="round"><animate attributeName="stroke-dashoffset" dur="2s" repeatCount="indefinite" from="0" to="502"/><animate attributeName="stroke-dasharray" dur="2s" repeatCount="indefinite" values="150.6 100.4;1 250;150.6 100.4"/></circle></symbol></svg>
In SVG1.1, Use element requires reference to SVG fragment not SVG URL. Try to add id attribute to root svg element of external SVG file and add hash string to href value of use element, like this.
external svg(spinner_1.svg)
<svg xmlns="http://www.w3.org/2000/svg" id="root">
<!--svg structure-->
</svg>
html uses external SVG file
<svg>
<use xlink:href="http://imgh.us/spinner_1.svg#root" />
</svg>
Note:In SVG2, you can set SVG URL to href attribute of use element. See https://www.w3.org/TR/2016/CR-SVG2-20160915/struct.html#UseElement
这篇关于为什么将xlink:href用于外部文件时SVG动画会停止的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!