8

svg に埋め込まれた円弧をスケーリングしたい。スケール変換を適用すると、0、0 に向かってスケーリングされます。その代わりに、それ自体から中心にスケーリングされるようにします。

ここにコードがあります

<g>                 
    <path d="M 300 100 a 200 200 0 1 0 0.00001 0" fill="#7EEC4A" stroke="rgb(208,231,235)" linejoin="round" stroke-width="1" fill-opacity="0.9" stroke-opacity="0.2">
    </path>

    <animateTransform attributeType="xml"
        attributeName="transform"
        type="scale"
        from="0"
        to="1"
        dur="0.5s" fill="freeze" />
</g>

4

2 に答える 2

14

要素を使用し<circle>て "r" 属性をアニメーション化する:

<g>                 
    <circle cx="200" cy="200" r="200" fill="#7EEC4A" stroke="rgb(208,231,235)" linejoin="round" stroke-width="1" fill-opacity="0.9" stroke-opacity="0.2">
        <animate attributeType="xml" attributeName="r" from="0" to="200" dur="5s" repeatCount="indefinite" />    
    </circle>
</g>
于 2012-07-17T08:08:20.863 に答える
3

元の形状をそのままにしておくことができなかったため、完全に満足できるものではありませんが、必要な効果は問題ないようです。

<g transform="translate(300,250)">
        <g>
            <path d="M 0 -150 a 200 200 0 1 0 0.00001 0" fill="#7EEC4A"
                stroke="rgb(208,231,235)" linejoin="round" stroke-width="1" fill-opacity="0.9"
                stroke-opacity="0.2">
            </path>
            <animateTransform attributeType="xml"
                attributeName="transform"
                type="scale"
                from="0"
                to="1"
                dur="0.5s" fill="freeze" />
        </g>
    </g>

このフィドルを試すことができます

于 2012-07-17T20:25:07.217 に答える