animateMotion путь только с маркером start-end и marker-end svg - PullRequest
Новая
       7

animateMotion путь только с маркером start-end и marker-end svg

0 голосов
/ 01 февраля 2019

возможно ли анимировать путь с помощью marker элементов?рассматриваемый идентификатор пути - # orbit1.причина, по которой я создал markers, заключается в том, что они будут использоваться несколько раз.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1" viewBox="0 0 1500 1000">

	<defs>
		<marker id="arrowRight" viewBox="0 0 7.1 11.5" refX="5" refY="5.75"
			markerUnits="userSpaceOnUse" orient="auto-start-reverse"
			markerWidth="7.1" markerHeight="11.5">
			<polygon points="1,11.5 0,10.4 5.1,5.7 0,1 1,0 7.1,5.7" fill="#00897b"/>
		</marker>

		<marker id="circle" viewBox="0 0 6 6" refX="1" refY="3"
			markerUnits="userSpaceOnUse" orient="auto"
			markerWidth="6" markerHeight="6">
			<circle cx="3" cy="3" r="3" fill="#4caf50"/>
		</marker>
	</defs>

	<!-- arrowhead symbol -->
	<symbol>
		<path id="d_arrow1" fill="red" d="M-10-10L10 0l-20 10 2-10-2-10z" />
	</symbol>

	<!-- animateMotion defines the motion path animation -->
	<animateMotion xlink:href="#a1" begin="0s" dur="3s" rotate="auto" repeatCount="indefinite">
		<mpath xlink:href="#orbit1" />
		<!-- mpath = sub-element for the <animateMotion> element provides the ability to reference an external <path> element as the definition of a motion path -->
	</animateMotion>

	<animateMotion xlink:href="#a2" begin="0s" dur="3s" rotate="auto-reverse" keyPoints="1;0" keyTimes="0;1" calcMode="linear" repeatCount="indefinite">
		<mpath xlink:href="#orbit2" />
	</animateMotion>


	<!-- arrow paths -->
	<path id="orbit2" d='M 365 400 A 370 200 0 0 1 1100 400' fill="none" stroke-width="3" style="stroke: green; stroke-dasharray: 50 818; stroke-dashoffset: 50"/>


	<!-- marker arrows -->
	<!-- orbit1 to be animated using mpath -->
	<path id="orbit1" d="M308.7 34.9C381.3 37.4 444.3 78 478.7 137.5" stroke="#4caf50" fill="none" stroke-width="2" stroke-miterlimit="10" stroke-dasharray="50 1000" stroke-dashoffset="50"
	marker-start="url(#circle)"
	marker-end="url(#arrowRight)"/>

	<!-- <animate> svg element used to animate an attribute or property of an element over time. it's normally inserted inside the element or referenced by the href attribute of the target element -->
	<animate id="anim1" xlink:href="#orbit1" attributeName="stroke-dashoffset" from="50" to="-960" dur="3s" begin="0s" fill="freeze" repeatCount="indefinite" />
	<!-- animate using the animateMotion definition above -->

	<animate id="anim2" xlink:href="#orbit2" attributeName="stroke-dashoffset" from="-810" to="50" dur="3s" begin="0s" fill="freeze" repeatCount="indefinite" />

<!--	<use id="a1" xlink:href="#d_arrow1" x="0" y="0" width="100" height="50" />-->
  	<use id="a2" xlink:href="#d_arrow1" x="0" y="0" width="100" height="50" />

</svg>
...