我的 svg 圆没有正确旋转答案

【问题标题】：my svg circle is not rotating proper我的 svg 圆没有正确旋转
【发布时间】：2018-07-31 19:37:41
【问题描述】：

您好，我正在尝试创建一个旋转的 svg 圆，但它不能正确旋转。我流这个链接。

https://www.youtube.com/watch?reload=9&v=1lmFMsrLgwM

这是我的代码

HTML-----

<!DOCTYPE html>
<html>
<head>
    <title></title>

<style type="text/css">

    img{
        margin:auto;
        text-align: center;
        display: block;
    }
</style>


</head>
<body>


<img src="wheal.svg"/>
</body>
</html>

svg代码

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="100px" height="100px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
<circle fill="none" stroke="#EC008C" stroke-width="2" stroke-dasharray="1.5" cx="25" cy="25" r="19.5">

<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 50 50"  to="360 50 50 " dur="10s" repeatCount="indefinite"/>



</circle>
</svg>

【问题讨论】：

标签： css animation svg

【解决方案1】：

请更新您的<animateTransform from="0 25 25" to="360 25 25" ... 值，之后效果很好，请查看下面的工作 sn-p。希望对你有帮助:)

svg {
  margin: auto;
  text-align: center;
  display: block;
}

<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" viewBox="0 0 50 50">
    <circle fill="none" stroke="#EC008C" stroke-width="2" stroke-dasharray="1.5" cx="25" cy="25" r="19.5">
      <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 25 25" to="360 25 25 " dur="10s" repeatCount="indefinite" />
    </circle>
  </svg>

【讨论】：

是的，它工作正常，谢谢 Mate :) 但是你能解释一下我们是如何发现我们应该取 25 25 值
你的viewbox的宽度和高度是50，因此你圈子的transform origin是25。
更准确的答案是因为圆以 25,25 为中心（参见cx 和cy 值）。
同意@PaulLeBeau
@DeepakGoud，我很高兴它帮助了你，你现在可以投票吗？