在将 svg 转换为 img 中使用 css答案

【问题标题】：Using css in converted svg to img在将 svg 转换为 img 中使用 css
【发布时间】：2017-12-11 10:07:01
【问题描述】：

我正在尝试将 svg 转换为图像格式。实际上很多工作都很好，我知道如何从 SVG 转换为画布，从画布转换为 img。我的问题是 svg 使用已包含在 css 文件中的 css，并且通过转换为画布，样式将丢失。

有人知道如何将样式复制到我的 svg 或画布中吗？

这是我的代码：https://jsfiddle.net/DaWa/70w9db1d/

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>SVG2IMG</title>
    <link rel="stylesheet" href="./circle.css">
</head>
<body>
<svg width="100" height="100">
    <circle cx="50" cy="50" r="40"/>
</svg>

<script>
  var svg = document.querySelector('svg');

  let xml  = new XMLSerializer().serializeToString(svg);
  let data = "data:image/svg+xml;base64," + btoa(xml);
  let img  = new Image();
  img.src  = data;
  document.body.appendChild(img)

</script>

</body>
</html>

还有我的 CSS：

circle {
    fill:red
}

【问题讨论】：

@JGFMK 该链接页面对 OP 的问题没有帮助。

标签： javascript html css canvas svg

【解决方案1】：

我使用这个技巧将每个节点的计算样式添加到其样式属性中，并且它有效。也许它可以帮助你。

更新 1： 一些浏览器不支持 cssText 属性，因此您可以使用下面的代码，这有点跨浏览器。

更新 2： Firefox 计算 css 引号属性，其中包括一些 btoa 无法正确编码的无效字符串字符。

let addStyle = function(children) {
   for (let i = 0; i < children.length; i++) {
     let child = children[i];
     if (child instanceof Element) {
       let cssText = '';
       let computedStyle = window.getComputedStyle(child, null);
       for (let i = 0; i < computedStyle.length; i++) {
         let prop = computedStyle[i];
         cssText += prop + ':' + computedStyle.getPropertyValue(prop) + ';';
       }
       child.setAttribute('style', cssText);
       addStyle(child.childNodes);
     }
   }
 }

 let svg = document.querySelector('svg');
 addStyle(svg.childNodes);
 let xml = new XMLSerializer().serializeToString(svg);
 let data = "data:image/svg+xml;base64," + btoa(unescape(encodeURIComponent(xml)));
 let img = new Image();
 img.src = data;
 document.body.appendChild(img);

circle {
  fill: red
}

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" />
</svg>

【讨论】：

这里存在一些跨浏览器问题。该图像在我的主浏览器（Win64 上的 Firefox/54.0.1）中为黑色，在 Chrome 中为红色。（边缘在“对象不支持属性或方法'forEach'”时崩溃，但我想这是一个完全不同的问题。）无论如何都是不错的方法。
@ÁlvaroGonzález 是的，我猜，computedStyle 仅适用于 web-kit。我会将此添加到答案中。谢谢提醒。
然而caniuse 显示出相当广泛的支持。也许它只是不适用于 SVG。
@ÁlvaroGonzález 显然其他浏览器不支持 cssText。在 IE 中它返回空字符串。
@user7521838 我用 firefox 解决了这个问题，并确保它适用于 Chrome、IE 和 firefox。如果您在使用其他浏览器时遇到问题，请告诉我