SVG从中心重新缩放圆答案

【问题标题】：SVG Rescale circle from centerSVG从中心重新缩放圆
【发布时间】：2014-10-14 06:47:31
【问题描述】：

我想在从 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>

【问题讨论】：

标签： css animation svg rescale

【解决方案1】：

您需要通过将 animateTransform 设为圆的子级而不是同级来使 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>

【讨论】：