1

この要素を使用して、svg:use多くのノードを持つ大きな D3.js ツリー内にアニメーション SVG スピナーを埋め込みます。

1 つのノードは次のようになります。

<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>

g.nodeツリー内の多くの要素の 1 つに、必要に応じて JQuery を使用してスピナーを挿入します。

スピナーの 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 では、アニメーションの最初の「フレーム」だけが表示されますが、スピナーはアニメーション化されません。

この問題を解決する方法を知っている人はいますか？

ありがとう！

4

1 に答える 1

4

useどうやらChromeは、埋め込まれた外部SVGファイルでアニメーションを（自動的に）再生しませんが、要素によって参照されるSVGが外部ファイルからではなく、ドキュメント内のどこかからロードされた場合に再生されることがわかりました。

一時的な解決策は次のとおりです。

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

于 2013-08-08T08:43:12.033 に答える