如何正确居中并旋转SVG圆圈，并将多边形居中在圆圈中心？

Question

我正在尝试让内部的圆形旋转。在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>

- Viaoer43

Answer 1

1. 你的画布宽度为207像素，高度也是207像素。圆圈居中于50％处，因此位于207/2 = 103.5像素，这就是你需要进行旋转的位置。

2. 多边形宽度为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>

- Robert Longson