如何使用JavaScript向SVG的defs中插入CSS样式表？

这里有一个完整的JavaScript解决方案，可以帮你把CSS样式表添加到SVG的defs元素中，完全符合你想要的目标结构：

// 获取页面中已有的defs元素
const defs = document.getElementById('mydefs');

// 创建SVG命名空间下的style元素（必须用这个方法，SVG属于XML命名空间）
const styleElement = document.createElementNS('http://www.w3.org/2000/svg', 'style');
// 设置style元素的类型属性
styleElement.setAttribute('type', 'text/css');

// 创建CSS样式文本节点
const cssContent = document.createTextNode('.myclass { fill: red; }');
// 将样式文本添加到style元素中
styleElement.appendChild(cssContent);

// 把style元素插入到defs内部
defs.appendChild(styleElement);

关键细节说明： #

• 为什么要用createElementNS？因为SVG元素属于http://www.w3.org/2000/svg命名空间，普通的createElement创建的元素不会关联到这个命名空间，浏览器可能无法正确解析SVG内的style标签，所以必须使用这个方法。
• 执行这段代码后，你的SVG结构就会变成你期望的样子：

  <svg>
    <defs id="mydefs">
      <style type="text/css"> .myclass { fill: red; } </style>
    </defs>
    <rect class="myclass" x="10" y="10" width="20" height="20"/>
  </svg>
  

• 此时带有myclass类的rect元素会自动应用红色填充的样式。

内容的提问来源于stack exchange，提问作者Daniel