Question

我希望黄色矩形旋转45度（它是），但我也希望 运动方向 旋转，以便出现黄色矩形去“下坡”（沿着蓝线）。我不希望它继续水平移动。

<svg width="800" height="400" viewBox="0 0 800 400"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" >

 <!-- decorative circles for the ends of the blue line. -->
  <g transform="rotate(45, 400, 200)">
    <path id="myPath" d="M150,200 L650,200" fill="none"
        stroke="blue" stroke-width="5.6" />
    <circle cx="150" cy="200" r="8.94" fill="blue"  />
    <circle cx="650" cy="200" r="8.94" fill="blue"  />
  </g>

  <g>
    <rect x="0" y="0"
        fill="yellow" stroke="red" width="84" height="56"></rect>
    <animateMotion dur="4s" repeatCount="1" rotate="45"
        path="M150,200 L650,200" >
    </animateMotion>
  </g>
</svg>

另一种方法是将<mpath xlink:href="#myPath" />作为animateMotion SVG元素的子元素。在这种情况下，您可以省略path="M150,200 L650,200"。

Answer 1

你是说这个意思吗？我已经移动了animateMotion，因此它仅适用于rect并向包含<g>元素添加了一个变换。我可以把rect放在另一个<g>元素中，我想这会更简单。

<svg width="800" height="400" viewBox="0 0 800 400"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" >

 <!-- decorative circles for the ends of the blue line. -->
  <g transform="rotate(45, 400, 200)">
    <path id="myPath" d="M150,200 L650,200" fill="none"
        stroke="blue" stroke-width="5.6" />
    <circle cx="150" cy="200" r="8.94" fill="blue"  />
    <circle cx="650" cy="200" r="8.94" fill="blue"  />
  </g>

  <g transform="rotate(45, 400, 200)">
    <rect x="0" y="0"
        fill="yellow" stroke="red" width="84" height="56">
        <animateMotion dur="4s" repeatCount="1"
            path="M150,200 L650,200" >
        </animateMotion>
    </rect>
  </g>
</svg>

使用SVG中的animateMotion旋转rect的运动方向

1 个答案: