在将 svg 转换为 img 中使用 css
Posted
技术标签:
【中文标题】在将 svg 转换为 img 中使用 css【英文标题】：Using css in converted svg to img 【发布时间】：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 >
<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 的问题没有帮助。 【参考方案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 >
<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。如果您在使用其他浏览器时遇到问题，请告诉我以上是关于在将 svg 转换为 img 中使用 css的主要内容，如果未能解决你的问题，请参考以下文章