如何使 SVG 元素在路径上移动？答案

【问题标题】：How can I make a SVG element to move on the path?如何使 SVG 元素在路径上移动？
【发布时间】：2021-10-23 06:08:34
【问题描述】：

我想将rect 沿path 移动。因此我翻译了rect，使它的位置是path 的开头。但是当我开始动画时，rect 的翻译是相对于path 进行解释的。因此rect 会随着路径的平移偏移移动。

这是一个例子：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="600px"
    height="400px">
    <defs />
    <path id="path" d="M 100 100 L 100 15 L 500 15 L 500 150" fill="none" stroke="#000000" stroke-width="3"
      stroke-miterlimit="10" pointer-events="none" />
    <g transform="translate(50,75)">
      <rect height="50" width="100" fill="#FDD34D" rx="10" stroke-width="1px" stroke="#000000">
      </rect>
      <text x="15" y="28">Click me !</text>
      <animateMotion id="move" dur="4.6s" begin="click">
        <mpath xlink:href="#path" />
      </animateMotion>
    </g>
  </svg>

我怎样才能让rect 在路径上移动？

编辑

我正在寻找一种适用于多种不同路径的解决方案。例如

  <svg viewBox="-100 -130 700 400">
    <defs />
    <path id="path" d="M 0 0 L 0 -90 L 500 -90 L 500 150" fill="none" stroke="#ff0000" stroke-width="3"
      stroke-miterlimit="10" pointer-events="none" />

    <path id="path2" d="M 150 0 L 150 90 L -50 90 L -50 150" fill="none" stroke="#ff0000" stroke-width="3"
      stroke-miterlimit="10" pointer-events="none" />
    <g>
      <rect height="50" width="100" x="-50" y="-25" fill="#FDD34D" rx="10" stroke-width="1px" stroke="#000000" />
      <text text-anchor="middle" dominant-baseline="middle">Click me !</text>
      <animateMotion id="move" dur="4.6s" begin="click">
        <mpath xlink:href="#path" />
      </animateMotion>
    </g>

    <g>
      <rect height="50" width="100" x="100" y="-25" fill="#FDD34D" rx="10" stroke-width="1px" stroke="#000000" />
      <text text-anchor="middle" x="150" dominant-baseline="middle">Click me !</text>
      <animateMotion id="move" dur="4.6s" begin="click">
        <mpath xlink:href="#path2" />
      </animateMotion>
    </g>
  </svg>

【问题讨论】：

标签： svg svg-animate

【解决方案1】：

主要思想是让文本和矩形以点 x=0, y=0 为中心

<svg  viewBox="-100 -130 700 400">
    <defs />
    <path id="path" d="M 0 0 L 0 -90 L 500 -90 L 500 150" fill="none" stroke="#ff0000" stroke-width="3"
      stroke-miterlimit="10" pointer-events="none" />
   <g>
      <rect height="50" width="100" x="-50" y="-25" fill="#FDD34D" rx="10" stroke-width="1px" stroke="#000000"/>    
      <text text-anchor="middle" dominant-baseline="middle">Click me !</text>
      <animateMotion id="move" dur="4.6s" begin="click">
        <mpath xlink:href="#path" />
      </animateMotion>
    </g>
  </svg>

【讨论】：

将文本和矩形围绕一个点 x = 0, y = 0 居中是个好主意！
我添加了一个答案。这就是您所说的“点 x=0，y=0”吗？

【解决方案2】：

好的，我想我现在明白了。您在中心渲染一些元素，然后将其翻译到您想要的位置。

  <svg viewBox="0 0 800 500">
<defs />

<g transform="translate(100, 120)">
  <path id="path" d="M 0 0 L 0 -85 L 500 -85 L 500 150" fill="none" stroke="#000000" stroke-width="3"
    stroke-miterlimit="10" pointer-events="none" />

  <g>
    <rect height="50" width="100" x="-50" y="-25" fill="#FDD34D" rx="10" stroke-width="1px" stroke="#000000">
    </rect>
    <text dominant-baseline="middle" text-anchor="middle">Click me !</text>
    <animateMotion id="move" dur="4.6s" begin="click">
      <mpath xlink:href="#path" />
    </animateMotion>
  </g>
</g>

<g transform="translate(180, 200)">
  <path id="path2" d="M 0 0 L 0 50 L 300 50 L 300 -100" fill="none" stroke="#000000" stroke-width="3"
    stroke-miterlimit="10" pointer-events="none" />

  <g>
    <rect height="50" width="100" x="-50" y="-25" fill="#FDD34D" rx="10" stroke-width="1px" stroke="#000000">
    </rect>
    <text dominant-baseline="middle" text-anchor="middle">Click me !</text>
    <animateMotion id="move" dur="4.6s" begin="click">
      <mpath xlink:href="#path2" />
    </animateMotion>
  </g>
</g>
  </svg>

【讨论】：