使用外部CSS将SVG导出到服务器

Question

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

任何帮助都是非常感谢的！

小提琴

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

Answer 1

为了导出SVG，必须将样式内联。但是，如果您正在为已经从外部CSS文件中引入的样式寻找解决方案，下面是一种方法。

用外部CSS样式演示实现SVG的导出

在代码中，名为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;
        });
      }
    });
   });
  }
}

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

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

以下是导出的图像：

​

希望这能有所帮助。:)