如何正确居中和旋转 SVG 圆并将多边形居中在圆的中心？答案

【问题标题】：How to center and rotate SVG circle correctly and center polygon in the center of the circle?如何正确居中和旋转 SVG 圆并将多边形居中在圆的中心？
【发布时间】：2019-10-21 16:52:18
【问题描述】：

我正在尝试让里面的圆圈旋转。在 animateTransform 的 from 和 to 中使用 50% 不起作用。

我正在尝试的另一件事是将多边形放在圆的中心。

body {
  margin: 0;
  background: black;
}

#container {
  background: rgba(0, 155, 255, 0.3);
  padding: 10px;
}

#circle1 {
  
}

#circle2 {
  stroke-dasharray: 20 3 55;
}

#circle3 {
  stroke-dasharray: 22;
}

<div id="container">
<svg xmlns="http://www.w3.org/2000/svg" height=207px width=207px stroke="#00bd80" fill="none">
   <circle id="circle1" r="100" cx="50%" cy="50%" stroke-width="7px"/>
   
   <circle id="circle2" r="96" cx="50%" cy="50%" stroke-width="5px">
      <animateTransform attributeType="xml"
                    attributeName="transform"
                    type="rotate"
                    from="0 98.5 98.5"
                    to="360 98.5 98.5"
                    dur="20s"
                    repeatCount="indefinite"/> <!-- how to center correctly -->
   </circle>
   
   <circle id="circle3" r="80" cx="50%" cy="50%" stroke-width="5px"/>
   <polygon points="30,15 22.5,28.0 7.5,28.0 0,15 7.5,2.0 22.5,2.0"></polygon>
</svg>
</div>

【问题讨论】：

标签： html css svg

【解决方案1】：

您的画布宽 207 像素，高 207 像素。圆圈以 50% 为中心，因此在 207/2 = 103.5px 处，您需要在此处进行旋转。
多边形宽 30 像素，宽 26 像素，因此您也可以将其转换到位。你可以组合两个多边形平移命令，我把它们分开了，所以我做了什么更清楚。

console.log(document.getElementsByTagName("polygon")[0].getBBox())

body {
  margin: 0;
  background: black;
}

#container {
  background: rgba(0, 155, 255, 0.3);
  padding: 10px;
}

#circle1 {
  
}

#circle2 {
  stroke-dasharray: 20 3 55;
}

#circle3 {
  stroke-dasharray: 22;
}

<div id="container">
<svg xmlns="http://www.w3.org/2000/svg" height=207px width=207px stroke="#00bd80" fill="none">
   <circle id="circle1" r="100" cx="50%" cy="50%" stroke-width="7px"/>
   
   <circle id="circle2" r="96" cx="50%" cy="50%" stroke-width="5px">
      <animateTransform attributeType="xml"
                    attributeName="transform"
                    type="rotate"
                    from="0 103.5 103.5"
                    to="360 103.5 103.5"
                    dur="20s"
                    repeatCount="indefinite"/> <!-- how to center correctly -->
   </circle>
   
   <circle id="circle3" r="80" cx="50%" cy="50%" stroke-width="5px"/>
   <polygon transform="translate(103.5, 103.5) translate(-15, -13)" points="30,15 22.5,28.0 7.5,28.0 0,15 7.5,2.0 22.5,2.0"></polygon>
</svg>
</div>

【讨论】：