如何在SVG中的给定路径附近旋转路径

Question

所以我对SVG有问题，我正在尝试简单地在另一条路径上设置一条路径的动画，但是这些路径之间存在很大的偏移量

这是我的SVG代码

  <svg width="500" height="500" viewbox="0 0 132 132">
      <path
        id="path1"
        d="m 101.4187,109.72533 a 56.065571,56.065571 0 0 1 -78.831564,-8.28098 56.065571,56.065571 0 0 1 8.234505,-78.836434 56.065571,56.065571 0 0 1 78.841269,8.188024 56.065571,56.065571 0 0 1 -8.14154,78.84609"
        stroke="red"
        stroke-width="2"
        fill="transparent"
      ></path>
      
      
 <linearGradient id="myGradient">
        <stop offset="0%" style=" stop-color:#000080; stop-opacity:1" />
        <stop offset="100%"  style="stop-color:#00ccff; stop-opacity:0.38502708" />
      </linearGradient>



<!-- I want this ? element to go closer to the path above ? -->

  <path
      fill="url('#myGradient')"
      d="m 92.777301,95.941024 c -0.06085,0.01464 5.686103,1.71384 5.642996,1.66846 -0.04311,-0.04538 1.358822,5.781226 1.376568,5.721206 0.01775,-0.06 -4.327281,4.06739 -4.266426,4.05275 0.06085,-0.0146 -5.686104,-1.71384 -5.642996,-1.66846 0.04311,0.0454 -1.358822,-5.781231 -1.376569,-5.721209 -0.01775,0.06002 4.327281,-4.067389 4.266427,-4.052747 z"
    >
    <animateMotion dur="5s" repeatCount="indefinite" rotate="auto">
      <mpath xlink:href="#path1"/>
  </path>

请使用开发人员工具的“元素”选项卡查看动画。

这就是我所期望的

Answer 1

您需要平移元素以将其放置在左上角，然后可以对其应用路径动画。

您可以使用g元素

<svg width="500" height="500" viewbox="0 0 132 132">
      <path
        id="path1"
        d="m 101.4187,109.72533 a 56.065571,56.065571 0 0 1 -78.831564,-8.28098 56.065571,56.065571 0 0 1 8.234505,-78.836434 56.065571,56.065571 0 0 1 78.841269,8.188024 56.065571,56.065571 0 0 1 -8.14154,78.84609"
        stroke="red"
        stroke-width="2"
        fill="transparent"
      ></path>
      
      
 <linearGradient id="myGradient">
        <stop offset="0%" style=" stop-color:#000080; stop-opacity:1" />
        <stop offset="100%"  style="stop-color:#00ccff; stop-opacity:0.38502708" />
      </linearGradient>



<!-- I want this ? element to go closer to the path above ? -->

  <g transform="translate(-100,-100)"><path
      fill="url('#myGradient')"
      d="m 92.777301,95.941024 c -0.06085,0.01464 5.686103,1.71384 5.642996,1.66846 -0.04311,-0.04538 1.358822,5.781226 1.376568,5.721206 0.01775,-0.06 -4.327281,4.06739 -4.266426,4.05275 0.06085,-0.0146 -5.686104,-1.71384 -5.642996,-1.66846 0.04311,0.0454 -1.358822,-5.781231 -1.376569,-5.721209 -0.01775,0.06002 4.327281,-4.067389 4.266427,-4.052747 z"
    />
    <animateMotion dur="5s" repeatCount="indefinite" rotate="auto">
      <mpath xlink:href="#path1"/></animateMotion>
  </g>
  <!-- Below the element with no animation to understand  -->
  <g transform="translate(-95,-100)"><path
      fill="url('#myGradient')"
      d="m 92.777301,95.941024 c -0.06085,0.01464 5.686103,1.71384 5.642996,1.66846 -0.04311,-0.04538 1.358822,5.781226 1.376568,5.721206 0.01775,-0.06 -4.327281,4.06739 -4.266426,4.05275 0.06085,-0.0146 -5.686104,-1.71384 -5.642996,-1.66846 0.04311,0.0454 -1.358822,-5.781231 -1.376569,-5.721209 -0.01775,0.06002 4.327281,-4.067389 4.266427,-4.052747 z"
    />
  </g>