Question

我希望在从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>

Answer 1

您需要将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>

SVG从中心重新缩放圆圈

1 个答案: