如何在svg中修复一个不缩放的圆圈：没有出现错误

Question

我试图使用SVG中的缩放动画将圆从1px半径扩展到20px半径。当前半径是1px，我试图将其缩放到20倍。问题在于，每当我尝试运行代码时，1px点会向上诊断并向左移动然后突然出现在SVG的外侧

我尝试使用atributeType="xml"与atributeName="r"以及使用atributeName="transform" type="scale"

这是整个代码的链接：https://pastebin.com/ARR2kUfM

      <animatetransform
      attributeType="xml"
      attributeName="transform"
      type="scale"
      from="1"
      to="20"
       begin="0s"
       dur="2s"
       repeatCount="indefinite"
       fill="freeze"
      />

        </circle>

我希望点从中心向外扩展到20px而不移动，但是当前的结果是从屏幕上飞出的圆圈。

Answer 1

任何svg图形的坐标都是从svg画布的左上角开始计算的。 使用scale命令时，将重新计算图形的坐标。

增加值scale(20)圆的中心坐标变大20倍，因此圆对角移动并延伸超出SVG画布的边缘。 要避免此效果，可以使用该命令增加圆的半径，而不是使用scale命令

 <style>
svg{
  border: 5px red solid;
  height:600px;
  width:600px;
}
  </style> 
  
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
         viewBox="0 0 600 600" >  

<rect x="295" y="430" width="10" height="100" style="stroke:none; fill: hsl(90, 100%, 47%);"/>
  <circle cx="300" cy="430" r="1"  stroke="black" stroke-width="2" fill="yellow">
   <animate
      attributeName="r"
      from="1"
      to="20"
	  begin="0s"
	  dur="2s"
	  repeatCount="indefinite"
	  fill="freeze"
      />
      
  </circle>
  
  <rect x="0" y="500" width="600" height="100" style="stroke:none; fill:hsl(120, 100%, 30%);"/>
</svg>