CSSアニメーションを使用してSVGの円の半径をリサイズ

CSSを使ってSVGサークルの半径属性をアニメーション化しようとしています。一方、Firefox Inspect Elementツールを使用すると、アニメーション自体がセットアップされ、正しく実行されていることがわかります。「。innerCircle」のサイズは目に見えて変わりません。CSSアニメーションを使用してSVGの円の半径をリサイズ

明らかに欠席しているものを見つけたり、何らかの方法で助けてくれたら、私は大いに感謝しています。私はむしろこれに新しいので、もし私がこの間違ったことに行ってしまったら、親切にしてください！

参考のためにファイルを貼り付けました。

もう一度おねがいします。

styling.css：

@keyframes buttonTransition { 
    from { 
     r: 5%; 
    } 
    to { 
     r: 25%; 
    } 
} 

.innerCircle { 
    animation-duration: 1s; 
    animation-iteration-count: infinite; 
    animation-name: buttonTransition; 
}

のindex.html：SVG 1.1円の半径で

<html> 
    <head> 
     <link href = "styling.css" rel = "stylesheet" type = "text/css"></link> 
    </head> 
    <body> 
     <svg class = "button" expanded = "true" height = "100px" width = "100px"> 
      <circle cx = "50%" cy = "50%" r = "35%" stroke = "#000000" stroke-width = "10%" fill = "none"/> 
      <circle class = "innerCircle" cx = "50%" cy = "50%" r = "25%" fill = "#000000"/> 
     </svg> 
    </body> 
</html>

出典

2015-09-05 Nathan Russell

がattributeなくCSS propertyあります。

CSSアニメーションはCSSプロパティをアニメーション化し、属性をアニメートしません。

これは基本的にあなたの問題なので、CSSアニメーションをFirefoxやSafariの属性で動作させることはできません。不透明度、塗りつぶし、またはストロークなどのCSSプロパティを選択した場合、うまくいきました。

SMILアニメーションは、これらのUAの属性（およびCSSプロパティ）で動作します。

<html> 
 
    <head> 
 
     <link href = "styling.css" rel = "stylesheet" type = "text/css"></link> 
 
    </head> 
 
    <body> 
 
     <svg class = "button" expanded = "true" height = "100px" width = "100px"> 
 
      <circle cx = "50%" cy = "50%" r = "35%" stroke = "#000000" stroke-width = "10%" fill = "none"/> 
 
      <circle class = "innerCircle" cx = "50%" cy = "50%" r = "25%" fill = "#000000"> 
 
       <animate attributeName="r" begin="0s" dur="1s" repeatCount="indefinite" from="5%" to="25%"/> 
 
      </circle> 
 
     </svg> 
 
    </body> 
 
</html>

今後の未完成のSVG 2仕様では、ほとんどの属性は、CSSプロパティ（ほとんどはあなたのようなユースケースが動作しない理由）になることを示唆しているようものの地平線上の解決策があります。 Chromeはこれを実装しており、その理由がアニメーションが動作するかどうかをチェックしています。将来のある時点で、FirefoxとSafariはこのSVG 2機能も実装するかもしれません。

出典

2015-09-05 06:54:15

"SVGのSMILアニメーション（、、など）が廃止され、削除されます。CSSアニメーションやWebアニメーションの代わりに使用してください。" -my console – krummens

@krummens将来のChromeのアップデートでは、使用を止められなくなったという警告が削除されたようです。 –

真剣に？私はを使用することができないという考えでかなりのSVGをやってきました。だから私は何もしなかったのですか？ – krummens

単純な選択肢があります：円の半径の代わりに要素のスケールをアニメートします。

SMILアニメーションは廃止され、従来の理由からブラウザでのみサポートされています。将来的に削除される可能性があり、Edgeや今後のブラウザには表示されません。

@keyframes buttonTransition { 
 
    from { 
 
     transform: scale(0.2); 
 
    } 
 
    to { 
 
     transform: scale(1); 
 
    } 
 
} 
 

 
.innerCircle { 
 
    animation-duration: 1s; 
 
    animation-iteration-count: infinite; 
 
    animation-name: buttonTransition; 
 
    transform-origin: center center; 
 
}

<html> 
 
    <head> 
 
     <link href = "styling.css" rel = "stylesheet" type = "text/css"></link> 
 
    </head> 
 
    <body> 
 
     <svg class = "button" expanded = "true" height = "100px" width = "100px"> 
 
      <circle cx = "50%" cy = "50%" r = "35%" stroke = "#000000" stroke-width = "10%" fill = "none"/> 
 
      <circle class = "innerCircle" cx = "50%" cy = "50%" r = "25%" fill = "#000000"/> 
 
     </svg> 
 
    </body> 
 
</html>

出典

2017-01-04 17:46:23 Evgeny

SMILアニメーションは非難されるかもしれませんが、少なくともIEのためのpolyfillがあります。私が知っているIEには、CSSアニメーション用のポリフィルはありません。 –

@RobertLongsonそれは2017です。誰がIEを気にしますか？ Edgeは間もなくその人気を追い越します。さらに、CSSアニメーションはIE10 +であり、最近誰も11未満のIEをサポートしていません。 – Evgeny

IEのバージョンは、SVG要素のCSS変換をサポートしていません。[this]（https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6820655-add-css-transforms-on- svg-elements）は、Edgeでもサポートされていません。 –

誰もが、まだこれを行う方法を検討している場合は、私はSMILを使用せずに黒丸のためにかなり良い解決策を見つけました。この解決策は少しハックです、そして、それは彼らに固体の塗りつぶしを持っているサークルのためにのみ動作します。基本的には、これらのサークルのストロークの幅をアニメーション化して、まるでそれらが成長しているかのように見せることでした。

マイ元円このIが0に近くなるように近接する円の半径を設定し動作させるため

<circle cx="46" cy="46" r="2.8"/>

。

<circle cx="46" cy="46" r="0.01"/>

そして元の半径の2倍であることがストローク幅を設定し、最後に設定ストローク幅のアニメーション。

@keyframes circle_animation { 
    from { 
     stroke-width: 0; 
    } 
} 

circle { 
    stroke-width: 5.6; 
    animation: circle_animation .5s linear infinite; 
}

出典

2017-01-21 23:03:54

CSSアニメーションを使用してSVGの円の半径をリサイズ

答えて

関連する問題