Question

当我使用D3操作SVG元素时，我将attr(such as x, y cx, cy)和style(such as stroke, text-anchor, fill)同时应用于SVG元素，仅适用于D3本身，这非常有效，

但是当我尝试使用 html2Canvas.js 拍摄快照时，SVG元素中的样式部分变得越来越多，我尝试了几次，当我将这些样式设为attr时，然后一切都再次起作用，所以我想知道如何将所有有效的样式移动到attr（我需要保留样式，因为我有时候，只能设置样式才能工作）

或者另一个直接的帮助可能是我如何让 html2canvas 识别attr和style，并获得最终的合作效果。

Answer 1

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

Answer 2

如果我们只讨论通过样式属性设置的样式，而不是使用样式表，那么以下是与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()
    );
  });
});

您必须修改第一行中的选择器以匹配您的用例。

如何根据样式应用于D3或JS中的SVG元素的属性

2 个答案: