SVG中的箭头绘制动画

我在SVG世界中颇为新颖，当我要“绘制”弯曲的箭头时遇到一些问题。SVG中的箭头绘制动画

基本上，我想创建一个像this article中解释的动画，但在路径的末尾有一个形状以显示箭头。

下面是我用直箭头代码：

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

用了CSS的：

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

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

结果如下：

Straight arrow

这很酷，但现在我想要一个弯曲的箭头。所以我已经更新了如下的动画标签：

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

我刚更改了动画的路径，以便有一个弯曲的。但结果是下面的一个：

Curved arrow

我认为这是非常合乎逻辑的，但它不是我想什么。标记正在直线上移动;它应该遵循绘图路径。

我不知道怎么做，说实话，任何建议将是巨大的:)

你可以找到a JSFiddle here。

正如您所看到的，这些实验中没有使用JS，如果我们可以避免使用这种语言并且只使用SVG + CSS，那将会很好。

在此先感谢！

来源

2014-10-30 KorHosik

我想你可能会发现这篇文章SVG的行动画非常有用： 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; 
    } 
}

演示：http://codepen.io/chriscoyier/pen/bGyoz

在有一个关于警告JavaScript并确定要绘制的线的长度。如果你不想使用JS，你可以通过更新dasharray和dashoffset值来确定动画的长度。

来源

2017-04-10 14:23:23 Paesano2000

尽管此链接可能会回答问题，但最好在此处包含答案的基本部分，并提供供参考的链接。如果链接页面更改，则仅链接答案可能会失效。 - [来自评论]（/ review/low-quality-posts/15799580） – Adam 2017-04-10 15:31:52

感谢@Adam，我已经用Chris的代码更新了这个例子。 – Paesano2000 2017-04-10 17:49:22

SVG中的箭头绘制动画

回答

相关问题