javascript - 将带有外部 CSS 的 SVG 导出到服务器

Question

我正在使用 d3.js 库根据一些参数在客户端生成图表。生成的图表应用了一些基于外部 css 文件的样式。是否可以将具有相同样式的图表导出到服务器？我尝试使用 base64 数据导出图表，但我得到的图表没有应用任何样式。
非常感谢任何帮助!

fiddle 手

附言JsFiddle 中显示的输出是我的 UI 现在的样子。 但是为了生成 PDF，我将 base64 数据发送回不包含样式的服务器。

Answer 1

为了导出 SVG，必须内联样式。但是，如果您正在为已经从外部 CSS 文件传入的样式寻找解决方法，可以使用以下方法。

DEMO IMPLEMENTING EXPORTING OF SVG WITH EXTERNAL CSS STYLING

在代码中，名为addInlineStyling 的函数 接收元素列表和相关属性，使用Window.getComputedStyles 提取样式/属性值> 方法并分别赋值给元素。

相关代码:

function addInlineStyling(elements) {
  if(elements && elements.length) {
    elements.forEach(function(d) {
     d3.selectAll(d.el).each(function(){
      var element = this;
      if(d.properties && d.properties.length) {
        d.properties.forEach(function(prop) {
          var computedStyle = getComputedStyle(element, null),
            value = computedStyle.getPropertyValue(prop);
          element.style[prop] = value;
        });
      }
    });
   });
  }
}

您可以随意修改数组的发送方式和用于提取样式的方式，但我想让您知道这是实现此目的的一种方法。 虽然建议使用内联样式。

请添加缺少的样式(如果有)。

这是导出的图像:

希望这对您有所帮助。 :)