Анимация круга SVG от маленького к большому и обратно к маленькому

Без использования css и js я хотел бы анимировать этот svg. Я хотел бы, чтобы круги шли от маленького к большому, а затем обратно к маленькому. Я заставил анимацию работать от малого до большого, но теперь я не могу понять, как заставить их вернуться к исходному размеру.

<svg xmlns="http://www.w3.org/2000/svg">
  <circle cx="6" cy="8" r="1" style="fill:steelblue;">
    <animate attributeType="XML" attributeName="r" from="1" to="6"
          dur="1s" begin=".25s" repeatCount="indefinite" />
  </circle>
  <circle cx="18" cy="8" r="1" style="fill:red;">
    <animate attributeType="XML" attributeName="r" from="1" to="6"
            dur="1s" begin=".5s" repeatCount="indefinite" />
  </circle>
  <circle cx="30" cy="8" r="1" style="fill:orange;">
    <animate attributeType="XML" attributeName="r" from="1" to="6"
            dur="1s" begin=".75s" repeatCount="indefinite" />
  </circle>
  <circle cx="42" cy="8" r="1" style="fill:green;">
    <animate attributeType="XML" attributeName="r" from="1" to="6"
            dur="1s" begin="1s" repeatCount="indefinite" />
  </circle>
</svg>

Сосредоточившись на 1-м круге, я хотел бы перейти от r="1" к r="6", а затем обратно к r="1". Это должно произойти в течение dur="1s".

Это возможно? Если да, то как? Опять же, без использования внешнего JS или CSS.

Спасибо!


svg svg-animate
person Eric    schedule 15.04.2017    source источник
comment
ведущие 0 обязательны для начальных значений, которые меньше 1   -  person Robert Longson    schedule 15.04.2017

Ответы (1)


arrow_upward
3
arrow_downward

Вместо from и to используйте values, чтобы перечислить ряд значений, между которыми должна выполняться анимация.

<svg xmlns="http://www.w3.org/2000/svg">
  <circle cx="6" cy="8" r="1" style="fill:steelblue;">
    <animate attributeType="XML" attributeName="r" values="1;6;1"
             dur="1s" begin="0.25s" repeatCount="indefinite" />
  </circle>
  <circle cx="18" cy="8" r="1" style="fill:red;">
    <animate attributeType="XML" attributeName="r" values="1;6;1"
            dur="1s" begin="0.5s" repeatCount="indefinite" />
  </circle>
  <circle cx="30" cy="8" r="1" style="fill:orange;">
    <animate attributeType="XML" attributeName="r" values="1;6;1"
            dur="1s" begin="0.75s" repeatCount="indefinite" />
  </circle>
  <circle cx="42" cy="8" r="1" style="fill:green;">
    <animate attributeType="XML" attributeName="r" values="1;6;1"
            dur="1s" begin="1s" repeatCount="indefinite" />
  </circle>
</svg>

person Paul LeBeau    schedule 15.04.2017
comment
добавлены ведущие нули, чтобы это соответствовало спецификации SMIL (и, следовательно, работало в Firefox). - person Robert Longson; 15.04.2017