1

我试图弄清楚为什么它不会将此路径数据变形为另一个路径数据，我需要让它看起来像一个真实的动画。

这是我的 SMIL 代码：

    <animate xlink:href="#Barra3"  
    repeatCount="indefinite" 
    attributeName="d" 
    dur="5s"
    values="M52,346L56,346C61.523,346 66,350.477 66,356L42,356C42,350.477 46.477,346 52,346Z;
    M54,225C60.627,225 66,230.373 66,237L66,356L42,356L42,237C42,230.373 47.373,225 54,225Z;"/>

这是我的代码笔：

https://codepen.io/joannesalfa/pen/mdPBJxq 并转到第 181 行。我正在使用 SMIL。

4

1 回答 1

3

尝试在 svg 中变形路径时最重要的是 d 属性 hes 具有相同数量的命令和相同的命令。我已经重写了短路径，以便绘制形状侧面的线条的长度 = 0。

M54,346
C60.627,346,66,351.373,66,358 L66,358 
L42,358L42,358 C42,351.373,47.373,346,54,346Z _ _ 
_

请看一下：

svg{border:solid}
<svg viewBox="5 200 100 200" width="100">


  <path d="M54,346
          C60.627,346,66,351.373,66,358
          L66,358L42,358L42,358
          C42,351.373,47.373,346,54,346Z"  stroke="red" fill="gold" >

  <animate  dur='5s'
    attributeType="XML"
    attributeName='d'      
    repeatCount='indefinite'
           values="M54,225
           C60.627,225 66,230.373 66,236
           L66,356L42,356L42,236
           C42,230.373 47.373,225 54,225Z;
                                                                     
           M54,346
           C60.627,346,66,351.373,66,356
           L66,356L42,356L42,356
           C42,351.373,47.373,346,54,346Z;
                                                                                  M54,225
           C60.627,225 66,230.373 66,236
           L66,356L42,356L42,236
           C42,230.373 47.373,225 54,225Z" />
    
    </path>
</svg>

更新

OP正在评论：

您介意如何逐步重写短路径吗？我觉得这让我很困惑

我正在采用这两条路径，并将它们分成 5 条不同颜色的路径，每个命令一个。请注意，我必须在每条路径的开头添加对命令 (M) 的移动。移动到的值是前一个路径的最后一个点。线条，是蓝色的路径。

对于短路径，您可以在代码中看到那些蓝色路径，但在 svg 中看不到，因为它们的长度为 0。我需要那些长度为 0 的行，因为您在长路径中有行。

svg{width:200px;border:solid;overflow:visible; fill:none}
<svg viewBox="40 220 28 140" >
  <desc>The short path</desc>
  <path d="M54,346 C60.627,346,66,351.373,66,356" stroke="red" /> 
  <path d="M66,356 L66,356" stroke="blue" />           
  <path d="M66,356 L42,356" stroke="green" />    
  <path d="M42,356 L42,356" stroke="blue" /> 
  <path d="M42,356 C42,351.373,47.373,346,54,346" stroke="gold"/>

</svg>

<svg viewBox="40 220 28 140" >
  <desc>The long path</desc>
      <path d="M54,225 C60.627,225 66,230.373 66,237" stroke="red"/> 
      <path d="M66,237 L66,356" stroke="blue" />
      <path d="M66,356 L42,356" stroke="green" />  
      <path d="M42,356 L42,237" stroke="blue"/>
      <path d="M42,237 C42,230.373 47.373,225 54,225;" stroke="gold"/>

</svg>

于 2020-09-02T12:06:55.523 回答