我如何申请根据风格属性的SVG元素D3或JS

当我使用D3操纵SVG元素，我申请都attr(such as x, y cx, cy)和style(such as stroke, text-anchor, fill)到SVG元素，D3本身只，这工作得很好，我如何申请根据风格属性的SVG元素D3或JS

但是当我尝试使用html2Canvas.js来拍摄快照时，那么SVG元素中的样式部分变得越野车，我做了几次尝试，结果是，当我将这些样式作为attr时，然后所有事情都再次起作用，所以我不知道如何将所有有效的样式移动到attr中（我需要保留样式，有时候我只能设置样式）

或者其他直接帮助可能我该怎么做html2canvas承认attr和风格，只是得到他们最后的合作效果。

来源

2016-05-23 Kuan

您是通过样式属性（例如'style =“stroke：＃333; fill：＃999;”'）还是作为单个属性（'stroke =“＃333”'，'fill = “＃999”等）？改变另一种做事方式是否有助于解决问题？ –

@MaxStarkenburg实际上我不知道哪个设置有效，但我只是试一试，我想在保持样式的同时设置attr。 – Kuan

尝试先将svg转换为画布。有一个项目https://github.com/gabelerner/canvg在那里，这可能会帮助你。在转换svg之后，html2canvas应该能够正确渲染快照。

来源

2016-05-24 03:31:41

谢谢，在尝试之前，我想知道这canvg是否可以识别样式（内联或通过样式表）和attr？ – Kuan

是的，只要样式是在svg中定义的，请参阅http://jsfiddle.net/9ncuf42o/用于样式变体，http://jsfiddle.net/cc1nt89k/用于归因变体。 –

如果我们只谈论那些通过style属性设置样式，不使用样式表，那么下面是D3的独立的一个选项：

var svgElements = document.querySelectorAll("svg *"); 
Array.prototype.forEach.call(svgElements, function(svgElement){ 
    var styles = svgElement.getAttribute("style").split(";"); 
    styles.forEach(function(style){ 
    var styleComponents = style.split(":"); 
    svgElement.setAttribute(
     styleComponents[0].trim(), 
     styleComponents[1].trim() 
    ); 
    }); 
});

你必须修改选择在第一行中匹配你的用例。

来源

2016-05-24 05:20:51

对不起，我猜我不太明白，是什么意思**不是使用CSS选择器**应用的样式？ – Kuan

对不起，描述很糟糕。我编辑了我的答案。 –

我如何申请根据风格属性的SVG元素D3或JS

回答

相关问题