小编use*_*838的帖子

在转换的svg中使用css到img

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