Vẽ hoạt ảnh của một mũi tên trong SVG

Question

Tôi khá mới trong thế giới SVG và tôi đang đối mặt với một số vấn đề khi tôi muốn "vẽ" một mũi tên cong.

Về cơ bản, tôi muốn tạo hoạt ảnh như hình ảnh được giải thích trong this article, nhưng có hình ở cuối đường dẫn để hiển thị mũi tên.

Dưới đây là đoạn code tôi sử dụng cho mũi tên thẳng:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"> 
<defs> 
    <marker 
    id="arrow" 
    orient="auto" 
    viewBox="0 0 10 10" 
    markerWidth="3" 
    markerHeight="4" 
    markerUnits="strokeWidth" 
    refX="1" refY="5"> 
    <polyline points="0,0 10,5 0,10 1,5" fill="black" /> 
    </marker> 
</defs> 

<path 
    id="line" 
    marker-end="url(#arrow)" 
    stroke-width="3" 
    fill="none" 
    stroke="black"> 

    <animate 
     dur="2s" 
     repeatCount="indefinite" 
     attributeName="d" 
     values="M10,10 L10,10; M10,10 L45,25;" /> 
</path> 

Với một chút CSS:

#line 
{ 
    stroke-dasharray: 5; 
    stroke-dashoffset: 10; 
    -webkit-animation: draw 1s linear infinite; 
} 

@-webkit-keyframes draw 
{ 
    to { stroke-dashoffset: 0;} 
} 

Kết quả là dưới đây:

Vì vậy, đó là mát mẻ, nhưng bây giờ tôi muốn một mũi tên cong. Vì vậy, tôi đã cập nhật thẻ animate như sau:

<animate 
     dur="2s" 
     repeatCount="indefinite" 
     attributeName="d" 
     values="M7,121 C7,121 7,121 7,121; M7,121 C66,4 143,75 147,125" /> 

Tôi vừa thay đổi đường dẫn đến hoạt ảnh để có hình tròn cong. Nhưng kết quả là hình dưới đây:

Tôi nghĩ nó khá hợp lý, nhưng nó không phải là những gì tôi muốn. Điểm đánh dấu hiện đang di chuyển trên một đường thẳng; nó nên đi theo con đường vẽ.

Tôi không có ý tưởng làm thế nào để làm như vậy phải trung thực, bất cứ đề nghị sẽ là tuyệt vời :)

Bạn có thể tìm a JSFiddle here.

Như bạn có thể thấy, không có JS nào được sử dụng trong các thử nghiệm này, sẽ rất tuyệt nếu chúng ta có thể tránh ngôn ngữ này và chỉ sử dụng SVG + CSS.

Cảm ơn trước!

Answer 1

Tôi nghĩ rằng bạn có thể tìm thấy bài viết này trên dòng phim hoạt hình svg rất hữu ích: https://css-tricks.com/svg-line-animation-works/

CSS:

.path { 
    stroke-dasharray: 1000; 
    stroke-dashoffset: 1000; 
    animation: dash 5s linear alternate infinite; 
} 

@keyframes dash { 
    from { 
    stroke-dashoffset: 1000; 
    } 
    to { 
    stroke-dashoffset: 0; 
    } 
} 

Demo của nó trong hành động: http://codepen.io/chriscoyier/pen/bGyoz

Trong đó là một cảnh báo về JavaScript và xác định độ dài của đường vẽ. Nếu bạn không muốn sử dụng JS, bạn có thể tìm ra chiều dài để tạo hiệu ứng bằng cách cập nhật các giá trị dasharray và dashoffset.