SVG => アニメーション

備考

<animate>要素によるSMILアニメーションは、現在、（2016年7月）主要なブラウザでサポートされていますが、Microsoftブラウザは例外です。 Microsoftとの互換性のためにpolyfillとして使用できるライブラリ（fakeSMIL）があります。

Chrome 45は、CSSアニメーションと今後のWebアニメーションの宣言的なアニメーション構文を支持してSMILを非難しました。残念ながら、現在のブラウザでは部分的にのみ実装されています。しかし、Chrome開発者は最近、意図を停止しました（このStackOverflowの回答を参照）

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="50" y="50" height="100" width="100" stroke="black" fill="yellow">
        <animate
            attributeType="XML"
            attributeName="height"
            begin="0s"
            dur="10s"
            from="100"
            to="200"
            repeatCount="indefinite"
        />
    </rect>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="50" y="50" height="100" width="100" stroke="black" fill="yellow">
        <animateTransform
            attributeType="XML"
            attributeName="transform"
            type="rotate"
            begin="0s"
            dur="10s"
            from="0"
            to="360"
            repeatCount="indefinite"
        />
    </rect>
</svg>

Modified text is an extract of the original Stack Overflow Documentation

ライセンスを受けた CC BY-SA 3.0

所属していない Stack Overflow

SVG
アニメーション

サーチ…

備考