SVG animateTransform translate and scale simultaneously fails
Asked Answered
I

1

8

I have a path that I want to animate using animateTransform. I want to translate and scale the path simultaneously. It doesn't work. Apparently only the second animation is working: in this case scale. What am I doing wrong?

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>
Ideation answered 16/3, 2019 at 17:1 Comment(0)
S
9

The second transform needs to be additive="sum" so that it doesn't replace the first.

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>
Sakovich answered 16/3, 2019 at 17:8 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.