SVG Animation mit CSS3

Question

Ich hatte während meiner SVG einen Schreibfehler gemacht, aber nur behoben und es funktioniert perfekt.

<?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> 

Der äußere Kreis dreht sich mit einer unendlichen Zeit

Answer 1

Ich weiß nicht, svg, aber ich weiß, Winkel: 0 ° = 360 °.

Vielleicht sollten Sie eine erste Transfom von = "0 50 50" bis = "180 50 50" machen, wenn diese beendet ist, machen Sie einen zweiten Transfom von = "180 50 50" bis = "360 50 50"

Answer 2

Bitte testen Sie Ihr Beispiel, bevor Sie es posten. Die Präambel von dem, was Sie gepostet haben, analysiert nicht einmal den Browser.

Sobald Sie die Rechtschreibfehler "trabsform" zu "transformieren" korrigieren, sollte es funktionieren. Hier ist eine korrigierte Version:

<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>