1. ホーム
  2. 質問と答え
  3. SVG <set>タグのdur属性がアニメーション化されない

SVG <set>タグのdur属性がアニメーション化されない

2012-04-09 11 views
1

SVG <set>タグを使用してロールオーバーをアニメートしようとしていますが、dur = "1s"と指定しても、瞬時に変化します（Firefox、Safari、Opera、Chrome） ）。SVG <set>タグのdur属性がアニメーション化されない

<html> 
<body> 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"> 
     <set attributeType="CSS" attributeName="fill" to="green" begin="mouseover" end="mouseout" dur="1s" /> 
    </circle> 
</svg> 

</body> 
</html>

私は2個の<animate>タグを使用したい効果を達成することができますが、私は私が保存したい異なる初期色を有していてもよく、複数の要素への移行を適用することができるようにしたい（この方法は私が指定する必要があります2番目のアニメーションタグの最初の色は「赤」）。第1のコードセグメントで

<html> 
<body> 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"> 
     <animate attributeType="CSS" attributeName="fill" to="green" begin="mouseover" dur="1s" fill="freeze" /> 
     <animate attributeType="CSS" attributeName="fill" to="red" begin="mouseout" dur="1s" fill="freeze"/> 
    </circle> 
</svg> 

</body> 
</html>

<set>タグは初期の色を保持するが、遷移をアニメーション化されていません。 w3仕様の私の理解が正しいなら、それはあるべきです - これはブラウザ固有のバグのように見えますか、または私はw3仕様を誤解しましたか？これについてもっと良い方法がありますか？ SVG 1.1 Specificationで説明したように

出典

2012-04-09 yasashiku

+1

リプロ例：http://jsfiddle.net/4xx5p/（これはサファリだけでなく、Firefoxの上で本当です）、それはどちらかのSafariで動作しないことを確認するための – Phrogz

+0

感謝;私はOperaとChromeでもテストしましたが、私も同じ動作をしています。 – yasashiku

答えて

3

：

「セット」要素は、単に指定された期間の属性の値を設定の簡単な手段を提供します。
...
to = "<value>"「セット」要素の継続期間中の属性の値を指定します。

（重点鉱山。）

あなたが見ることができるように、<set>要素のdurationは遷移時間ではなく、効果が適用される時間の長さ。 end属性を削除すると、赤色から緑色への色の変化が1秒でand then revertの元の値に変わるのがわかります。

詳細については、SMIL Specificationの<set>要素をご覧ください。

編集：ここにあなたのSVG要素と要素の塗りつぶしに基づいて、データが希望<animate>要素を作成することを使用して、実行一度スクリプトに注釈を付けるためにカスタムデータを使用した例です。あなたはhttp://phrogz.net/svg/change-color-on-hover.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:y="yasashiku" viewBox="0 0 240 150"> 
    <title>Change Color on Hover</title> 
    <style> 
    circle { stroke:black; stroke-width:2px } 
    circle:not([fill]) { fill:purple } 
    </style> 
    <circle cx="50" cy="50" r="40" fill="red" y:hoverAnimFillTo="blue" y:hoverAnimDur="0.3s" /> 
    <circle cx="100" cy="100" r="40" fill="red" y:hoverAnimFillTo="green" y:hoverAnimDur="1s" /> 
    <circle cx="150" cy="42" r="40" fill="orange" y:hoverAnimFillTo="yellow" /> 
    <circle cx="200" cy="100" r="40"    y:hoverAnimFillTo="steelblue" /> 
    <script> 
    var els = document.getElementsByTagName('*'), 
     y = 'yasashiku'; 
    for (var i=els.length;i--;){ 
     var fillColor = els[i].getAttributeNS(y,'hoverAnimFillTo'); 
     if (fillColor){ 
     var dur = els[i].getAttributeNS(y,'hoverAnimDur') || '0.1s'; 
     createOn(els[i],'animate',{ 
      begin:'mouseover', 
      attributeType:'CSS', attributeName:'fill', 
      to:fillColor, 
      dur:dur, fill:'freeze' 
     }); 
     createOn(els[i],'animate',{ 
      begin:'mouseout', 
      attributeType:'CSS', attributeName:'fill', 
      to:els[i].getAttribute('fill') || computedStyle(els[i],'fill'), 
      dur:dur, 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; 
    } 
    function computedStyle(el,name){ 
     return document.defaultView.getComputedStyle(el,null)[name]; 
    } 
    </script> 
</svg>

出典

2012-04-10 04:05:40 Phrogz

+0

ありがとうございます。どのように私は初期の色の先験的な知識なしに元に戻すことができるかについての任意の考え？ – yasashiku

+0

@yashashiku個人的には、私は色をコントロールするか、属性に基づいて（）要素を動的に作成する（より単純な）JSにしたいと思います。これがあなたのためのオプション（JSが利用可能な場合）であり、それに援助が必要な場合は、私の答えを詳細に修正することができます。 – Phrogz

+1

...どうしようもなく、私は例を作り、問題を編集しました。うまくいけば、これは役に立ちます。 – Phrogz

1

使用「の値」と「keyTimes属性」属性に住んでいるこの例を見ることができますか？

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
 
    <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"> 
 
    <animate attributeType="CSS" attributeName="fill" values="red;green;green;red" keyTimes="0;0.2;0.8;1" begin="mouseover" dur="2s" fill="freeze" /> 
 
    <animate attributeType="CSS" attributeName="fill" to="red" begin="mouseout" dur="1s" fill="freeze"/> 
 
    </circle> 
 
</svg>

出典

2014-11-12 09:35:01

 関連する問題

  • 関連する問題はありません^_^