Question

是否可以使用svg动画（从上到下，线性或类似的东西-包括点）对路径进行动画处理？该代码没有路径。

这是我的svg：

<svg xmlns="http://www.w3.org/2000/svg" width="495.303" height="422.699" viewBox="0 0 495.303 422.699">
  <g id="Group_110" data-name="Group 110" transform="translate(-670 -3225.301)">
    <rect id="Rectangle_172" data-name="Rectangle 172" width="244" height="1" transform="translate(961 3394) rotate(90)" fill="#57af2d"/>
    <rect id="Rectangle_173" data-name="Rectangle 173" width="269" height="1" transform="translate(691 3636.5)" fill="#57af2d"/>
    <ellipse id="Ellipse_289" data-name="Ellipse 289" cx="4" cy="4" rx="4" ry="4" transform="translate(964.303 3641.301) rotate(180)" fill="#57af2d"/>
    <circle id="Ellipse_298" data-name="Ellipse 298" cx="11.5" cy="11.5" r="11.5" transform="translate(670 3625)" fill="#57af2d"/>
    <rect id="Rectangle_174" data-name="Rectangle 174" width="202" height="1" transform="translate(960 3393)" fill="#57af2d"/>
    <ellipse id="Ellipse_291" data-name="Ellipse 291" cx="4" cy="4" rx="4" ry="4" transform="translate(964.303 3398.301) rotate(180)" fill="#57af2d"/>
    <ellipse id="Ellipse_292" data-name="Ellipse 292" cx="4" cy="4" rx="4" ry="4" transform="translate(1165.303 3398.301) rotate(180)" fill="#57af2d"/>
    <rect id="Rectangle_176" data-name="Rectangle 176" width="165" height="1" transform="translate(1162 3229) rotate(90)" fill="#57af2d"/>
    <ellipse id="Ellipse_294" data-name="Ellipse 294" cx="4" cy="4" rx="4" ry="4" transform="translate(1165.303 3233.301) rotate(180)" fill="#57af2d"/>
  </g>
</svg>

Answer 1

到目前为止，最好，最简单的解决方案是重新绘制SVG，以便确实使用<path>作为该行。那是我的建议。

如果您不能这样做，则可以使用遮罩中的路径来实现所需的功能。路径（在蒙版中）沿您的直线移动，并在对其笔触进行动画处理时显示出真实路径。

#revealer path {
  animation: reveal 3s linear forwards;
  stroke-dashoffset: 906px;
}

@keyframes reveal {
  from { stroke-dashoffset: 906px; }
  to   { stroke-dashoffset: 0px; }
}

<svg xmlns="http://www.w3.org/2000/svg" width="495.303" height="422.699" viewBox="0 0 495.303 422.699">
  <defs>
    <mask id="revealer">
      <path d="M 492,0 L 492,168 L 290,168 L 290,412 L 0,412" fill="none" stroke="white" stroke-width="26" stroke-dasharray="906 906"/>
    </mask>
  </defs>

  <g mask="url(#revealer)">
  <g id="Group_110" data-name="Group 110" transform="translate(-670 -3225.301)">
    <rect id="Rectangle_172" data-name="Rectangle 172" width="244" height="1" transform="translate(961 3394) rotate(90)" fill="#57af2d"/>
    <rect id="Rectangle_173" data-name="Rectangle 173" width="269" height="1" transform="translate(691 3636.5)" fill="#57af2d"/>
    <ellipse id="Ellipse_289" data-name="Ellipse 289" cx="4" cy="4" rx="4" ry="4" transform="translate(964.303 3641.301) rotate(180)" fill="#57af2d"/>
    <circle id="Ellipse_298" data-name="Ellipse 298" cx="11.5" cy="11.5" r="11.5" transform="translate(670 3625)" fill="#57af2d"/>
    <rect id="Rectangle_174" data-name="Rectangle 174" width="202" height="1" transform="translate(960 3393)" fill="#57af2d"/>
    <ellipse id="Ellipse_291" data-name="Ellipse 291" cx="4" cy="4" rx="4" ry="4" transform="translate(964.303 3398.301) rotate(180)" fill="#57af2d"/>
    <ellipse id="Ellipse_292" data-name="Ellipse 292" cx="4" cy="4" rx="4" ry="4" transform="translate(1165.303 3398.301) rotate(180)" fill="#57af2d"/>
    <rect id="Rectangle_176" data-name="Rectangle 176" width="165" height="1" transform="translate(1162 3229) rotate(90)" fill="#57af2d"/>
    <ellipse id="Ellipse_294" data-name="Ellipse 294" cx="4" cy="4" rx="4" ry="4" transform="translate(1165.303 3233.301) rotate(180)" fill="#57af2d"/>
  </g>
  </g>
</svg>

Eclipse的SVG动画

1 个答案: