SVG 是指可缩放矢量图形（Scalable Vector Graphics），它是一种用 XML 描述 2D 绘图的语言，常用于网页图形绘制。在前端开发中，我们经常需要使用 SVG 图形，而 npm 上有一个名为 svg-attributes 的包能够帮助我们更方便地操作 SVG 属性，本文将介绍如何使用 svg-attributes。
安装 svg-attributes
可以通过 npm 安装 svg-attributes：
--- ------- -------------- ------
使用 svg-attributes
svg-attributes 为每个 SVG 元素添加了一个 style 属性，通过在 style 属性中指定 CSS 样式即可设置 SVG 的显示效果。此外，svg-attributes 还为 SVG 元素添加了一些自定义属性，下面是一些常用的自定义属性：
1. stroke-width
stroke-width 表示 SVG 线条的宽度，可以设置为数字或者长度值（如 1px）。示例代码：
---- ----------- ------------- ----- ------ ------ ---------- ----------- -------------- ------------------ ------
2. stroke-dasharray
stroke-dasharray 表示 SVG 线条的虚线间隔，可以设置为一个由数字组成的列表，如 2 3，表示有 2 个像素的实线和 3 个像素的空白，这个列表也可以写成百分比。示例代码：
---- ----------- ------------- ----- ------ ------ ---------- ----------- -------------- ---------------- ------------------- ---- ------
3. stroke-linecap
stroke-linecap 表示 SVG 线条的端点样式，有三种取值：butt、round 和 square。其中 butt 表示平直的线段，round 表示圆形线段，square 表示方形线段。示例代码：
---- ----------- ------------- ----- ------ ------ ---------- ----------- -------------- ----------------- ------------------------ ------
4. stroke-linejoin
stroke-linejoin 表示 SVG 线条的连接样式，有三种取值：miter、round 和 bevel。其中 miter 表示尖角连接，round 表示圆角连接，bevel 表示斜角连接。示例代码：
---- ----------- ------------- ----- ---- -- -- - -- -- - -- --- -------------- ----------------- ------------------------- ------
5. fill-rule
fill-rule 表示 SVG 填充区域的规则，有两种取值：evenodd 和 nonzero。其中 evenodd 表示奇偶规则，nonzero 表示非零环绕数规则。示例代码：
---- ----------- ------------- ----- ---- -- -- - -- -- - -- -- -- ------------ --------------------- ------
6. viewBox
viewBox 表示 SVG 显示区域的范围，可以设置为四个数字组成的列表，如 0 0 100 100，表示坐标系的左上角为 (0, 0)，右下角为 (100, 100)。配合 preserveAspectRatio 属性可以实现 SVG 图形的缩放和居中。示例代码：
---- ----------- ------------ ---------- - --- ---- ----------------------------- ------ ----- ------ ------ ---------- ----------- -------------- ------------------ ------
结语
svg-attributes 可以方便地设置 SVG 的样式和属性，使 SVG 图形更加美观。尽管自定义属性不能通过 CSS 直接设置，但是可以通过 JavaScript 代码动态修改，使用起来也很方便。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedba40b5cbfe1ea06118d9