svg内的SVG动画：使用元素。适用于Firefox，不适用于Chrome

我使用svg:use元素将动画SVG微调器嵌入到具有多个节点的大型D3.js树中。svg内的SVG动画：使用元素。适用于Firefox，不适用于Chrome

一个节点看起来是这样的：

<g class="node clickable" data-path="1" data-depth="0" transform=""> 
    <text class="title" x="0" y=".36em" style="fill-opacity: 1;" text-anchor="begin">Model</text> 
    <text class="subtitle" x="0" y="2em" style="fill-opacity: 1;" text-anchor="begin"> 
    <use href="static/spinner.svg#spinner" transform="translate(54.75,-9) rotate(0 7,9)"> 
</g>

使用jQuery需要在树中的许多g.node元素之一，当插入微调。

微调的SVG源代码如下：

<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg id="spinner" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    width="16px" height="16px"> 
    <g> 
    <line x1="50" y1="3.167" x2="50" y2="23.5" opacity="0.2"> 
     <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0s" /> 
    </line> 
     <line x1="80.102" y1="14.124" x2="67.033" y2="29.7" opacity="0.2"> 
     <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.1333s" /> 
    </line>  
     <line x1="96.121" y1="41.867" x2="76.096" y2="45.398" opacity="0.2">   
     <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.2666s" /> 
    </line> 
    <line x1="90.559" y1="73.415" x2="72.949" y2="63.249" opacity="0.2"> 
     <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.4s" /> 
    </line>  
     <line x1="66.018" y1="94.007" x2="59.064" y2="74.901" opacity="0.2"> 
     <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.5333s" /> 
    </line> 
    <line x1="33.983" y1="94.007" x2="40.937" y2="74.901" opacity="0.2"> 
     <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.6666s" /> 
    </line>  
     <line x1="9.442" y1="73.417" x2="27.052" y2="63.25" opacity="0.2"> 
     <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.8s" /> 
    </line>  
    <line x1="3.879" y1="41.868" x2="23.904" y2="45.399" opacity="0.2"> 
     <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.9333s" /> 
    </line>  
    <line x1="19.897" y1="14.124" x2="32.966" y2="29.7" opacity="0.2"> 
     <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="1.0666s" /> 
    </line> 
    </g> 
</svg>

这工作完全在Firefox，而不是在Chrome或Safari。在Chrome和Safari中，只显示动画的第一个“框架”，但微调不是动画。

有谁知道如何解决这个问题？

谢谢！

来源

2013-08-07 Bert

任何机会，你可以张贴的完整代码或到的jsfiddle/bl.ocks.org版本的链接？看到你的作品如何融合在一起很难。 – explunit

您是否尝试过设置attributeType =“XML” –

@MichaelMullany：我试过了，但没有任何区别。 – Bert

显然，Chrome不会（自动）在嵌入的外部SVG文件中播放动画，但我发现它在use元素引用的SVG不是从外部文件加载而是从文档内某处加载时会发生。

一个临时的解决办法如下：

http://bl.ocks.org/bertspaan/6182774

来源

2013-08-08 08:43:12 Bert

临时解决方案的一个可能的改进是使用svg''元素而不是隐藏的div。见http://stackoverflow.com/questions/18092976/is-it-possible-to-import-svg-shapes-in-d3-js/18093866#18093866 – explunit

svg内的SVG动画：使用元素。适用于Firefox，不适用于Chrome

回答

相关问题