[英]SVG to PNG with Embedded Style Sheet
我对从SVG创建PNG感兴趣。 我遵循以下给出的代码:
https://developer.mozilla.org/zh-CN/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas
但是由于CSS的样式,图片无法正确显示。 我制作了一个本地CSS文件,并导入了SVG,如下所述:
但是它似乎没有使用样式表。 任何想法为什么我会有这个错误?
谢谢。
看看PhantomJS-您需要先安装它,然后编写自己的脚本或按照以下方式运行某些程序:
phantomjs rasterize.js http://ariya.github.com/svg/tiger.svg tiger.png
您还可以保存为PDF,设置缩放设置等。
您可以使用html2canvas从任何dom元素(包括svg元素)生成画布。
但是,样式表中定义的svg元素的样式定义不会应用于生成的画布。 可以通过在调用html2canvas之前将样式定义添加到svg元素来进行修补。
受本文启发,我创建了以下代码:
function generateStyleDefs(svgDomElement) {
var styleDefs = "";
var sheets = document.styleSheets;
for (var i = 0; i < sheets.length; i++) {
var rules = sheets[i].cssRules;
for (var j = 0; j < rules.length; j++) {
var rule = rules[j];
if (rule.style) {
var selectorText = rule.selectorText;
var elems = svgDomElement.querySelectorAll(selectorText);
if (elems.length) {
styleDefs += selectorText + " { " + rule.style.cssText + " }\n";
}
}
}
}
var s = document.createElement('style');
s.setAttribute('type', 'text/css');
s.innerHTML = "<![CDATA[\n" + styleDefs + "\n]]>";
//somehow cdata section doesn't always work; you could use this instead:
//s.innerHTML = styleDefs;
var defs = document.createElement('defs');
defs.appendChild(s);
svgDomElement.insertBefore(defs, svgDomElement.firstChild);
}
// generate style definitions on the svg element(s)
generateStyleDefs(document.getElementById('svgElementId'));
// after generating the style defintions, call html2canvas
html2canvas(document.getElementById('idOfElement')).then(function(canvas) {
document.body.appendChild(canvas);
});
的例子
“如何将样式应用于嵌入式SVG?” 正如您提到的应该工作。 测试它时,需要在此代码行中定义youObjectElement。
var svgDoc = yourObjectElement.contentDocument;
再试一次。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.