Question

我有这个svg路径：

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width='500' height='500'>
<defs id="def">
<marker orient="auto" refY="0.0" refX="-3" id="Arrow2Mend" style="overflow:visible;">
  <path id="path3900" style="fill-rule:evenodd;stroke-width:0.62500000;stroke-linejoin:round;" d="M -15 -5 L 0 0 L -15 5 z" transform="scale(0.5)"></path>
</marker>
</defs>
<path style="fill:none;stroke:#000000;stroke-width:2.58384609;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;marker-end:url(#Arrow2Mend)" d="m 189,100.09448 200,0" id="arrowline"></path></svg>

我希望能够增加和减少＆＃34; #arrowline＆＃34;路径，带动画，在制作动画时将箭头保持在正确的位置。我尝试了各种方法，但它们要么太复杂，要么无法实现，要么无法正常工作。可能我错过了一些东西。任何帮助赞赏。谢谢。

Answer 1

我不知道你的意思＆＃34;正确＆＃34; - 你的意思是以下几点吗？

＆＃13;

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width='500px' height='500px'>
<defs id="def">
<marker orient="auto" refY="0.0" refX="-3" id="Arrow2Mend" style="overflow:visible;">
  <path id="path3900" style="fill-rule:evenodd;stroke-width:0.62500000;stroke-linejoin:round;" d="M -15 -5 L 0 0 L -15 5 z" transform="scale(0.5)"></path>
</marker>
</defs>

<path style="fill:none;stroke:#000000;stroke-width:2.58384609;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;marker-end:url(#Arrow2Mend)" d="m 10 10 l200,0" id="arrowline">
  
 <animate attributeName="d" from="m 10 10 l200,0" to="m 10 10 l400,0" dur="1s" repeatCount="indefinite"/>
  
</path>

    </svg>

＆＃13;

如何使用svg中的标记设置更改路径长度（线）的动画

1 个答案: