Question

您好，我正在尝试创建一个旋转的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>

Answer 1

请更新您的<animateTransform from="0 25 25" to="360 25 25" ...值，此后效果很好，请查看下面的工作代码段。希望对您有帮助：）

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>

我的svg圈旋转不正确

1 个答案: