SVG Анимация с CSS3

Question

У меня была ошибка орфографии во время моего 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> 

Внешний круг вращается в бесконечное время

Answer 1

я не знаю SVG, но я знаю, что углы: 0 ° = 360 °.

Возможно, вам нужно сделать первый переход из = "0 50 50" в = "180 50 50", тогда, когда этот закончен, выполните второй переход от = "180 50 50" до = "360 50 50"

Answer 2

Пожалуйста, проверьте свой пример перед отправкой. Преамбула того, что вы опубликовали, даже не анализируется в браузере.

Как только вы исправите орфографию «trabsform» для «преобразования», она должна работать. Вот скорректированная версия:

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