Wie kann ich nach Stil als Attribut für SVG-Elemente in D3 anwenden oder

Question

JS Wenn ich D3 verwenden SVG-Elemente zu manipulieren, bewerben ich mich sowohl attr(such as x, y cx, cy) und style(such as stroke, text-anchor, fill) zu SVG Elemente, für D3 nur selbst, das funktioniert ziemlich gut,

aber wenn ich versuche, html2Canvas.js zu verwenden, um einen Schnappschuss zu machen, dann wird der Stil Teil in SVG Elemente fehlerhaft, gab ich ein paar Versuche, stellt sich heraus, wenn ich diese Art als attr, dann funktioniert alles wieder, so Ich frage mich, wie kann ich alle gültigen Stile in attr verschieben (ich muss den Stil zu halten, denn ich manchmal, nur Einstellung als Stil kann funktionieren)

Oder eine andere direkte Hilfe könnte Wie könnte ich machen html2canvas erkennen sowohl Attr und Stil und nur ihre endgültige kooperative Wirkung.

Answer 1

Versuchen Sie zuerst, die Svg in Leinwand zu konvertieren. Es gibt ein Projekt https://github.com/gabelerner/canvg da draußen, das Ihnen vielleicht helfen kann. Nach dem Konvertieren der SVG, sollte HTML2canvas in der Lage sein, den Snapshot korrekt zu rendern.

Answer 2

Wenn wir nur sprechen über Stile, die über Stil Attribute gesetzt sind, nicht ein Stylesheet verwendet wird, dann ist die folgende eine Option, die unabhängig von d3 ist:

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() 
    ); 
    }); 
}); 

Sie werden die Wähler ändern müssen in der ersten Zeile passend zu Ihrem Anwendungsfall.