SVG animateTransform 平移和缩放同时失败

Question

我有一条路径，我想使用 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>

Answer 1

第二个转换需要 additive="sum"，这样它就不会替换第一个。

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>

SVG animateTransform 平移和缩放同时失败

SVG animateTransform translate and scale simultaneously fails

svg

smil