将SVG与外部CSS导出到服务器

Question

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

的jsfiddle

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

Answer 1

为了导出SVG，将样式内联起来至关重要。但是，如果您正在寻找已经从外部CSS文件中获得的样式的解决方法，那么这是一种方法。

DEMO IMPLEMENTING EXPORTING OF SVG WITH EXTERNAL CSS STYLING

在代码中，名为 addInlineStyling 的function接收元素列表和关联属性，使用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;
        });
      }
    });
   });
  }
}

随意修改数组的发送方式并用于提取样式，但我想告诉您这是一种方法。 虽然它有可能有内联的风格。

请添加缺少的样式（如果有的话）。

这是导出的图片：

希望这会有所帮助。 ：）