我如何在 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

您需要将您的元素转换回以将其放置在 top/left 角，然后您可以对其应用路径动画。

您可以使用 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>

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

How can i rotate the Path near the given path in SVG

css

animation

svg

svg-animate