0

このアニメーションは Firefox では完全に機能しますが、Chrome では機能しません。ポリゴンが動かない？ JSFiddle

<polygon fill="url(#grad1)" points="503,275 529,275 529,275 503,275">
    <animate attributeName="points"
         calcMode="linear"
         begin="1s" dur="0.4s"
         from="503,275 529,275 529,275 503,275"
         to="503,275 529,275 843,335 789,335"
         fill="freeze"/>

何か案は？

4

2 に答える 2

1

Chrome (バージョン 25.0.1364.152 まで) は、svg を完全にはサポートしていません。

一部の svg 機能もサポートされていませFirefoxん。たとえばanimateTransform、svg タグの直接の子である タグは、Firefoxおよびchromeで svg をアニメーション化しません。W3 ドキュメントでは、svg をアニメーション化する必要があると記載されていますが、

したがって、 で svg をテストする方がよいでしょうopera。

于 2013-03-09T19:42:24.633 に答える
0

もう一度試してみましょう。ポリゴンだけを見ていることに気づきませんでした。Chromeのポリゴンでは、アニメートは直接機能しないようですが、シェイプにフィルタを適用してフィルタ領域をアニメートすることで、同じ効果を得ることができます。それは一種のハッキーですが、それはあなたが望む場所にあなたを連れて行きます：

   <filter id="animateClip" x="0%" y="0%" width="100%" height="0%">
         <animate attributeName="height"
         attributeType="XML"
         calcMode="linear"
         dur="1s"
         from="0%"
         to="100%"
         fill="freeze"/>
        <feColorMatrix type="identity"/>
    </filter>

colormatrixは、フィルター結果を提供するためだけにあります。Chromeは空のフィルターが好きではありません。

于 2013-03-09T20:25:46.937 に答える