时间戳

首页 > 解决方案 > 我的 svg 圆没有正确旋转

css - 我的 svg 圆没有正确旋转

问题描述

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

标签： cssanimationsvg

解决方案

请更新您的<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>

推荐阅读