是否可以使用 javascript 获取外部 css 文件的内容以添加到 svg 文件？

Question

我需要获取外部 css 文件的内容才能将其添加到 svg。

我正在寻找的实际上是 css 的 toString 方法。这可能吗？我还没找到解决办法。

这是我正在寻找 svg 的解决方案 xml：

 <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
      "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
         width="10cm" height="5cm" viewBox="0 0 1000 500">
      <defs>
        <style type="text/css"><![CDATA[
          rect {
            fill: red;
            stroke: blue;
            stroke-width: 3
          }
        ]]></style>
      </defs>
      <rect x="200" y="100" width="600" height="300"/>
    </svg>

我尝试使用外部链接，但它没有呈现样式：

<?xml version="1.0" standalone="no"?>
<?xml-stylesheet href="mystyle.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width="10cm" height="5cm" viewBox="0 0 1000 500">
  <rect x="200" y="100" width="600" height="300"/>
</svg>

编辑：我本来应该添加这个 我可以在浏览器中正常渲染 svg，因为它可以访问 svg。

我需要做的是将 svg 发送到服务器进行进一步处理（转换格式，保存到数据库..）。问题是样式丢失了，因为 CSS 不包含在 svg xml 中。我需要像上面的第一个代码块一样将 css 添加到 svg 本身，这样我就可以保留样式。

Answer 1

如果您能够使用 JavaScript，您可以按如下方式获取样式表的内容：

[].slice.call(document.styleSheets[1].cssRules).forEach(function(rule){
  console.log('rule:', rule.cssText)
})

document.styleSheets[1] 是您的样式表。