3

この単純なSVGSMILアニメーションについて考えてみます。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50 -50 100 100">
  <circle r="40" fill="red">
    <animate
      attributeType="CSS" begin="click"
      attributeName="fill" to="blue" dur="0.3s" fill="freeze"/>
  </circle>
</svg>

これは、Windows上のChrome v18で正しく機能します（色を保持することに関するバグを法として）：http：
//phrogz.net/svg/change-color-on-click-simple.svg

JavaScriptを使用して要素を生成する<animate>と、Firefox、Safari、Operaですべて正常に動作しますが、Chromeでは正常に動作しません。Chromeでは、円をクリックしても何も起こりません。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50 -50 100 100">
  <circle r="40" fill="red"/>
  <script>
    var c = document.querySelector('circle');
    createOn(c,'animate',{
      attributeType:'CSS', begin:'click',
      attributeName:'fill', to:'blue',
      dur:'0.3s', fill:'freeze'
    });
    function createOn(el,name,attrs){
      var e = el.appendChild(document.createElementNS(el.namespaceURI,name));
      for (var name in attrs) e.setAttribute(name,attrs[name]);
      return e;
    }
  </script>

こちらのJavaScriptバージョンをご覧ください：http：
//phrogz.net/svg/change-color-on-click-simple-js.svg

コンソールにスクリプトエラーはありません。最初の例のコンテンツは、2番目の例を読み込んだ後にChromeデベロッパーツールから[HTMLとしてコピー]を選択して実際に生成されたため、正しい属性名と値が生成されていることがわかります。要素のnamespaceURIは、すべての属性<animate>のと同様に、両方（SVG名前空間）間で同じです（ ）。 namespaceURInull

<animate>JSで生成された要素をChromeで機能させる方法はありますか？

4

1 に答える 1

5

アニメーションを追加する前に属性を定義すると、機能しているように見えます。

http://jsfiddle.net/VFUHk/

于 2012-04-10T19:54:10.493 に答える