SVG路径动画(3)

最新推荐文章于 2024-08-28 22:04:04 发布

earth_small_ma

最新推荐文章于 2024-08-28 22:04:04 发布

阅读量1.3k

点赞数

分类专栏： SVG 文章标签： svg

本文链接：https://blog.csdn.net/earth_smallma/article/details/81194529

版权

本文深入探讨SVG路径动画，重点解析stroke-dasharray属性如何创建虚线效果，以及stroke-dashoffset如何配合偏移虚线。特别地，文章通过实例说明了当stroke-dasharray值等于线段长度时，结合stroke-dashoffset的特殊动画效果，并展示了如何实现一个'抽风路径'动画。

摘要由CSDN通过智能技术生成

SVG路径动画(3)

stroke-dasharray

该css属性主要用于在SVG中创建各种虚线

#line1{
   
    stroke: black;
    stroke-width: 10px;
    stroke-dasharray: 15 7 5 5 5 7;
    /*表示：画15px长，空7px，画5px长，空5px，画5px，空7px，后面则循环此过程
    所以在画这种特殊样式的虚线时，只需要找出被循环的那部分，然后用stroke-dasharray表示即可*/
}
#line2{
   
    stroke: black;
    stroke-width: 10px;
    stroke-dasharray: 10;/*表示：画10px，空10px，如此循环*/