0

1 1 から 2 2 にスケーリングした後、円を再スケーリングしたい.. スケーリングした後、突然 1 1 の位置になるためです。しかし、スケールサークルのように私が与えた期間に応じて再スケーリングしたい..この問題を解決するためのあなたの答えを親切に賞賛してください. 以下に私のスケールタイプコードが表示されます..

<svg xmlns="http://www.w3.org/2000/svg" style="position: absolute; width: 150px; height: 150px;margin-left: 600px;top: 100px;">
                <circle class ="cir" r="30" cx="34" cy="34" style="fill: red; stroke: blue; stroke-width: 2"/>
                    <animateTransform attributeName="transform"
                      type="scale"
                      from="1 1" to="2 2"
                      begin="0s" dur="4s"                         
                      repeatCount="indefinite"
                    />       
            </svg>
4

1 に答える 1

0

animateTransform を円に適用するには、円を兄弟ではなく円の子にする必要があります。次に、円の原点の周りをアニメーション化する場合は、ローカルの原点で円を描画し、親要素にそれを必要な場所に移動させます。

<svg xmlns="http://www.w3.org/2000/svg" style="position: absolute; width: 150px; height: 150px;margin-left: 600px;top: 100px;">
  <g transform="translate(34,34)">
            <circle class ="cir" r="30" style="fill: red; stroke: blue; stroke-width: 2">
                <animateTransform attributeName="transform"
                  type="scale"
                  from="1 1" to="2 2"
                  begin="0s" dur="4s"                         
                  repeatCount="indefinite"
                />       
            </circle>
    </g>
</svg>
于 2014-10-14T07:03:02.133 に答える