在转换的svg中使用css到img

Question

在转换的svg中使用css到img

use*_*838 5 html javascript css svg canvas

我正在尝试将svg转换为图像格式.实际上很多工作都非常好,我知道如何从SVG转换为canvas,从canvas转换为img.我的问题是svg使用css作为css文件包含并转换为canvas,样式将丢失.

有没有人知道如何将样式复制到我的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>

Run Code Online (Sandbox Code Playgroud)

而我的css:

circle {
    fill:red
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

Nim*_*imi 4

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

更新 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);

Run Code Online (Sandbox Code Playgroud)

circle {
  fill: red
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

这里存在一些跨浏览器问题。该图像在我的主浏览器（Win64 上的 Firefox/54.0.1）中为黑色，在 Chrome 中为红色。（Edge 在“对象不支持属性或方法‘forEach’”时崩溃，但我想这是一个完全不同的问题。）无论如何，这是一个不错的方法。 (2认同)

归档时间：	8 年，4 月前
查看次数：	183 次
最近记录：	8 年，4 月前