点击sapui5

Question

我在Sapui5中使用d3创建了一个维恩图。 注意：我在标签和内部标签中创建了圆圈，我使用标签来设置圆形样式。

现在我有一个按钮，当我点击按钮时，svg可以下载并可以查看。                            

未显示样式。

我正在做这样的onclick

    d3.select("#save").on("click", function(){
  var html = d3.select("svg")
        .attr("version", 1.1)
        .attr("xmlns", "http://www.w3.org/2000/svg")
        .node().parentNode.innerHTML;

  console.log(html);
  //var imgsrc = 'data:image/svg+xml;base64,'+ btoa(html);
  //var img = '<img src="'+imgsrc+'">'; 
  //d3.select("#svgdataurl").html(img);

});

任何人都可以帮助我解决这个问题。

Answer 1

未显示样式，因为它们未包含在SVG文档中。 您可以在SVG中添加<style>标记（请参阅MDN）。

对于您的具体情况，我会在一个单独的文件中指定此图表的CSS规则，您可以在保存时获取（再次）并在提供下载之前包含在SVG中。

Answer 2

与sapui5无关。你可以为svg添加类似于.attr("fill", "red"); or .style("fill","red")的东西。还有更多内容可以查看this。