나는이 SVG 경로가 SVG

Question

에 마커 경로 길이 (라인)을 변경 애니메이션 방법 :

내가 더불어, "#arrowline"경로의 길이를 증가 및 감소 할 수 있도록하려면

<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> 

애니메이션, 움직이는 동안 화살촉을 정확한 위치에 유지합니다. 다양한 방법을 시도했지만 구현하기에는 너무 복잡하거나 작동하지 않았습니다. 아마도 나는 뭔가를 놓치고 있습니다. 어떤 도움을 주셔서 감사합니다. 고맙습니다.

Answer 1

"올바른"의미가 무엇인지 모르겠습니까? 다음을 의미합니까?

<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>