SVG animateTransform переводить и масштабировать одновременно не удается - PullRequest
Новая
       26

SVG animateTransform переводить и масштабировать одновременно не удается

2 голосов
/ 16 марта 2019

У меня есть путь, который я хочу оживить, используя animateTransform.Я хочу перевести и масштабировать путь одновременно.Не работаетВидимо работает только вторая анимация: в данном случае scale.Что я делаю не так? 

svg{
width:300px; 
border:1px solid;
fill:none;
stroke:black;
}
<svg viewBox="-100 -100 200 200">

<path d="M-36.911,0C-36.911,-19.833,-19.833,-35.911,0,-35.911C19.833,-35.911,35.911,-19.833,35.911,0C35.911,19.833,19.833,35.911,0,35.911C-19.833,35.911,-36.911,19.833,-36.911,0z">

     <animateTransform
      attributeType="xml" 
      attributeName="transform"
      type="translate"
      dur="5s"
      values="0,0; 0,-50; 0,0; 0,50;0,0"
      repeatCount="indefinite"/>
   <animateTransform 
     attributeType="xml" 
     attributeName="transform" 
     type="scale"
     dur='5s'
     values="1;1.2;1;1.2;1"
     repeatCount="indefinite"/>
            
  </path>
  
  <circle r="1" />
</svg>

1 Ответ

1 голос
/ 16 марта 2019

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

svg{
width:300px; 
border:1px solid;
fill:none;
stroke:black;
}
<svg viewBox="-100 -100 200 200">

<path d="M-36.911,0C-36.911,-19.833,-19.833,-35.911,0,-35.911C19.833,-35.911,35.911,-19.833,35.911,0C35.911,19.833,19.833,35.911,0,35.911C-19.833,35.911,-36.911,19.833,-36.911,0z">

     <animateTransform
      attributeType="xml" 
      attributeName="transform"
      type="translate"
      dur="5s"
      values="0,0; 0,-50; 0,0; 0,50;0,0"
      repeatCount="indefinite"/>
   <animateTransform 
     attributeType="xml" 
     attributeName="transform" 
     type="scale"
     dur='5s'
     values="1;1.2;1;1.2;1"
     repeatCount="indefinite"
      additive="sum"/>
            
  </path>
  
  <circle r="1" />
</svg>
...