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