web-dev-qa-db-ja.com

左上隅ではなく中心点からのSVGスケールアニメーション

SVGでanimateTransformを使用して、左上隅ではなく中心点からオブジェクトをスケーリングするにはどうすればよいですか？

例：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="100px">
    <circle style="fill:blue;" cx="50" cy="50" r="45">
        <animateTransform attributeName="transform"
             type="scale"
             from="0 0"
             to="1 1"
             begin="0s"
             dur="1s"
             repeatCount="indefinite"
        />
    </circle>
</svg>

（Codepen： http://codepen.io/anon/pen/wKwrPg?editors=1 ）

enter image description here

animationsvgsvg-animate
10
MattSidor

additive="sum"を使用するようにスケーリング変換を変更し、円を画像の中心に変換する追加の変換を適用します。したがって、画像の中心で形状を定義する代わりに、その中心を0 0として定義し、次にtransform属性を使用してそれを50, 50（特定の正確な中心）に変換します。画像）。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="100px">
    <circle style="fill:blue;" cx="0" cy="0" r="45" transform="translate(50 50)">
        <animateTransform attributeName="transform"
             type="scale"
             additive="sum" 
             from="0 0"
             to="1 1"
             begin="0s"
             dur="1s"
             repeatCount="indefinite"
        />
    </circle>
</svg>

defsタグとuseタグを使用して円の定義を再利用する別の例を次に示します。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="100px">
    <defs>
        <circle id="def-circle" style="fill:blue;" cx="0" cy="0" r="45" />
    </defs>

    <use xlink:href="#def-circle" transform="translate(50 50)">
        <animateTransform attributeName="transform" 
        type="scale"
        additive="sum"    
        from="0 0"
        to="1 1"      
        beg="0s"
        dur="1s"
        repeatCount="indefinite" />
    </use>   
</svg>
13
trooper