SVG绘制线条箭头稳步上升动画特效 箭头要跟着直线一起动
时间: 2023-05-12 10:07:27 浏览: 512
可以使用CSS3的动画特效来实现SVG绘制线条箭头稳步上升动画特效,具体实现方式可以参考以下代码:
```html
<svg width="200" height="200">
<path d="M 50 50 L 150 50" stroke="black" stroke-width="2" fill="none" />
<marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
<path d="M 50 50 L 150 50" stroke="black" stroke-width="2" fill="none" marker-end="url(#arrow)">
<animate attributeName="y1" from="50" to="20" dur="2s" repeatCount="indefinite" />
<animate attributeName="y2" from="50" to="20" dur="2s" repeatCount="indefinite" />
</path>
</svg>
```
其中,`<path>`元素用于绘制直线,`<marker>`元素用于定义箭头,`marker-end`属性用于指定箭头的位置,`<animate>`元素用于实现动画效果,`attributeName`属性用于指定要动画的属性,`from`和`to`属性用于指定动画的起始值和结束值,`dur`属性用于指定动画的持续时间,`repeatCount`属性用于指定动画的重复次数。
关于箭头跟着直线一起动的问题,可以使用`<animateMotion>`元素来实现,具体实现方式可以参考以下代码:
```html
<svg width="200" height="200">
<path d="M 50 50 L 150 50" stroke="black" stroke-width="2" fill="none" marker-end="url(#arrow)">
<animateMotion dur="2s" repeatCount="indefinite">
<mpath xlink:href="#path" />
</animateMotion>
</path>
<path id="path" d="M 50 50 L 150 50" stroke="none" fill="none" />
<marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
</svg>
```
其中,`<animateMotion>`元素用于实现运动动画,`<mpath>`元素用于指定运动路径,`xlink:href`属性用于指定路径的ID。需要注意的是,路径的起点和终点要与直线的起点和终点一致,才能实现箭头跟着直线一起动的效果。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)