SVG 路径上的动画图像 [英] animate image on SVG Path

问题描述

我定义了一个 SVG 路径.我想在该路径上为图像设置动画.我可以使用 标签为对象设置动画.但我无法弄清楚如何用图像做到这一点.

I have a SVG path defined. I want to animate an image on that path. I can animate an object using <animateMotion>tag. But I can't figure out how to do that with an image.

这是我的 svg 路径:

Here is my svg path:

<svg id="svg" height="1746px" width="100%">
    <path d="M 100 50 Q 100 150 200 220 L 650 630 C 700 670 700 700 650 730 C 390 850 390 1000 580 1000
     Q 800 1000 900 1450 Q 900 1550 800 1550 L 300 1585 Q 160 1620 160 1740"stroke="black" stroke-width="30" fill="none"
    id="animatePath"/>
    <img src="car.png" id="car">
    <animateMotion xlink:href="#car" dur="10s" repeatCount="indefinite" begin="0s">
        <mpath xlink:href="#animatePath"/>
    </animateMotion>
</svg>

感谢您的任何建议.

推荐答案

使用 animateMotion 动画命令将位图捕捉到路径代替 标签，最好使用 SVG 标签

To snap a bitmap to a path using the animateMotion animation command instead of the <img> tag, it is better to use the SVG tag <image>

 <image xlink:href="https://i.stack.imgur.com/gLbds.png" y="-15" x="-15"  id="car" width="25px" height="25px">

属性:y =" - 15 "x =" - 15 " 相对于路径定位图标

The <image> attributes: y =" - 15 "x =" - 15 " position the icon relative to the path

<svg id="svg" height="1746px" width="100%">
     <!-- Way of movement -->
	<path d="M 100 50 Q 100 150 200 220 L 650 630 C 700 670 700 700 650 730 C 390 850 390 1000 580 1000
     Q 800 1000 900 1450 Q 900 1550 800 1550 L 300 1585 Q 160 1620 160 1740"stroke="black" stroke-width="30" fill="none"
    id="animatePath"/>
   <!-- Adding a bitmap to svg -->   
   <image id="car" xlink:href="https://i.stack.imgur.com/gLbds.png" y="-15" x="-15"   width="25px" height="25px">
    <animateMotion
	  xlink:href="#car"
	  dur="20s"
	  repeatCount="1"
	  begin="start.click"
	  restart="whenNotActive" >
      
	  <mpath xlink:href="#animatePath"/>
    </animateMotion> 
	</image>
	 <!-- Animation Start Button -->
	<g id="start">
	 <rect x="120" y="10" width="80" height="30" rx="5" fill="transparent" stroke="#B59964" />
	  <text x="138" y="33" font-size="24" fill="#C75C5C" >Start </text>
	</g>
</svg>

这篇关于SVG 路径上的动画图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！