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同时转换和缩放失败

1 个答案: