svg的stroke-dasharray及stroke-dashoffset属性

最新推荐文章于 2024-05-17 16:17:42 发布

youlinaixu

最新推荐文章于 2024-05-17 16:17:42 发布

阅读量6.2k

点赞数 1

文章标签： svg

本文链接：https://blog.csdn.net/youlinaixu/article/details/82351559

版权

本文介绍了SVG中的stroke-dasharray属性，用于定义描边的点划线样式，包括实线和虚线的宽度。同时讨论了stroke-dashoffset属性，它指定线段模式相对于路径起点的偏移。通过动态改变stroke-dashoffset，可以实现独特的‘绘图’动画效果。

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

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
//width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
//cx 和 cy 属性定义圆中心的 x 和 y 坐标。如果忽略这两个属性，那么圆点会被设置为 (0, 0)。