SVG <animatemotion>

时间:2016-12-25 12:43:45

标签: animation svg svg-animate smil

有人可以向我解释如何沿着折线和运动圆沿着直线制作运动圆吗?

&#13;
&#13;
	  	#braine{
	position: absolute;
	left: 30%;
	width: 900px;
	height: 900px;
}

.st0{fill:none;stroke:#000000;stroke-width:1;stroke-miterlimit:10;}
&#13;
<svg version="1.1" id="braine" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 235 235" style="enable-background:new 0 0 235 235;" xml:space="preserve">

<polyline id="l143" class="st0" points="50.9,35.6 59.8,35.5 59.9,50.3 67.9,58.2 68,82.7 "/>
<line id="l96" class="st0" x1="93.7" y1="111.1" x2="101.6" y2="111.1"/>

<circle id="circle1" r="1" cx="40" cy="40" fill="red"/>

<animateMotion 
    xlink:href="#circle1"
   dur="5s"
   begin="0s"
   fill="freeze"
   repeatCount="indefinite">
  
 <mpath xlink:href="#l143" />
  
</animateMotion>

<animate
		xlink:href="#circle1"   
	    attributeName="r" 	
	    values="1; 1.5; 1"
		keyTime="0; 0.5; 1"
	    dur="500ms"
	    repeatCount="indefinite" 
/>

<circle id="circle2" r="1" cx="90" cy="110" fill="green"/>

<animateMotion 
    xlink:href="#circle2"
   dur="5s"
   begin="0s"
   fill="freeze"
   repeatCount="indefinite">
  
 <mpath xlink:href="#l196" />
  
</animateMotion>

<animate
		xlink:href="#circle2"   
	    attributeName="r" 	
	    values="1; 1.5; 1"
		keyTime="0; 0.5; 1"
	    dur="500ms"
	    repeatCount="indefinite" 
/>
</svg>
&#13;
&#13;
&#13;

我需要首先在一个方向上移动轮廓折线上的红色圆圈然后再返回。一个绿色圆圈沿着线移动,首先在一个方向然后向后移动。

0 个答案:

没有答案