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>