在前端开发中，使用 SVG 可以帮助我们实现丰富多彩的图形效果。但是在编写 SVG 代码时，需要注意属性名需要加上命名空间标识符，否则在某些浏览器下会出现错误。为了避免这个问题，我们可以使用 npm 包 svg-attribute-namespace。
安装
使用 npm 安装 svg-attribute-namespace：
--- ------- -----------------------
或者使用 yarn：
---- --- -----------------------
使用方法
使用 svg-attribute-namespace 的方法很简单，只需要将需要加命名空间的属性名传入 getAttributeNameWithNamespace 函数即可：
------ - ----------------------------- - ---- -------------------------- ----- ------ - ------------------------------------------------------ ---------- -------------------------------------------------------- ------ -------------------------------------------------------- ------ ------------------------------------------------------- ------ ---------------------------------------------------------- ------- ----------------------------------
在上面的例子中，我们使用了 getAttributeNameWithNamespace 函数将属性名转化成加上命名空间的格式，从而避免了在某些浏览器下的错误。
示例代码
--------- -----
------
------
------------------------------ ----------
-------
------
---- ----------- -------------
------- ------- ------- ------ --------------------
------
------- --------------
------ - ----------------------------- - ---- --------------------------
----- ------ - ------------------------------------------------------ ----------
-------------------------------------------------------- ------
-------------------------------------------------------- ------
------------------------------------------------------- ------
---------------------------------------------------------- -------
--------------------------------------------------
---------
-------
-------在上面的示例代码中，我们先创建了一个普通的 SVG 图形，并且没有加命名空间的属性名。然后使用 getAttributeNameWithNamespace 函数将属性名转化成加上命名空间的格式，并且通过 document.createElementNS 创建一个新的 SVG 元素，最后将其添加到 SVG 中。
总结
svg-attribute-namespace 简化了在编写 SVG 代码时需要手动加上命名空间标识符的过程，并且避免了在某些浏览器下的错误。在实际开发中，我们可以将其作为一个常用的工具库来使用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/52591