在转换的svg中使用css到img

Question

我正在尝试将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>

而我的css：

circle {
    fill:red
}

Answer 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>

在转换的svg中使用css到img

问题描述

1 个解决方案

解决方案1
4 已采纳 2017-07-07 08:25:34

在转换的svg中使用css到img

问题描述

1 个解决方案

解决方案1 4 已采纳 2017-07-07 08:25:34

解决方案1
4 已采纳 2017-07-07 08:25:34