我如何申請根據風格屬性的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

回答

相關問題