使用CSS3的SVG动画

我在使用SVG的过程中犯了一个拼写错误，但刚刚修复，效果很好

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version:    6.00 Build 0)  -->
<!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 100 100" enable-   background="new 0     0 100 100" xml:space="preserve">
    <circle fill="#FFFFFF" stroke="#00AEEF" stroke-miterlimit="10" stroke-    dasharray="12" cx="49.833" cy="49.833" r="49.833">
    <animateTransform  attributeName="transform" 
               attributeType="XML" 
              type="rotate" 
              from="0 50 50"
              to="360 50 50"  
              dur="10s"  
              repeatCount="indefinite">
</animateTransform>
</circle>

</svg>

---

外圈以无限时间旋转

我不知道svg，但我知道角度：0°=360°

---

也许你应该先做一个从=“0 50 50”到=“180 50 50”的转换，然后当这个转换结束时，再做一个从=“180 50 50”到=“360 50”的转换。请在发布之前测试一下你的示例。您发布的内容的序言甚至没有在浏览器中进行解析

一旦您将拼写错误的“trabsform”改为“transform”，它就可以工作了。下面是一个更正的版本：

<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'
 width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0     0 100 100" xml:space="preserve">
<circle fill="#FFFFFF" stroke="#00AEEF" stroke-miterlimit="10" stroke-dasharray="12" cx="49.833" cy="49.833" r="49.833">
<animateTransform  attributeName="transform" 
           attributeType="XML" 
          type="rotate" 
          from="0 50 50"
          to="360 50 50"  
          dur="10s"  
          repeatCount="indefinite">

</animateTransform>
</circle>
</svg>

trabsform不是有效的属性名称。我在故障排除过程中忘记了拼写错误。下次会看得更清楚。非常感谢。