导出为 SVG 时在 amcharts.com 图表标题中添加下划线工件

Question

我想在导出 amcharts.com 图表时给图表标题加下划线，但在正常查看图表时不需要。 Amcharts.com 支持建议在导出图表时将下划线作为内联样式添加到标题。

您可以在此处找到代码示例：https://codepen.io/bryanf/pen/jrNkwo. I have modified the amcharts.com basic export example (here: https://www.amcharts.com/demos/exporting-chart-to-image/) 以包含 amcharts.com 支持建议的 "onPrint" 函数：

function onPrint (e, info) {
  var format = info.format,
      mimeType = info.mimeType,
      fileName = [info.fileName, info.extension].join("."),
      chart = this.setup.chart,
      chartExport = chart.AmExport,
      $div = $(chart.div);

  setTimeout(function () {
    $div.find(".amcharts-title").attr("text-decoration", "underline");

    chartExport.capture(info, function () {
      chartExport[["to", format].join("")](info, function (data) {     
        chartExport.download( data, mimeType, fileName );        
      });
    });
  }, 200);
}

"menu" object（也用于设置存在哪些菜单选项）中的各种格式（PNG、JPG 和 SVG）触发 onPrint 函数 "export" object:

"export": {
  "enabled": true,
  "menu": [{
    "class": "export-main",
    "menu": [ {
      "label": "Save Image",
      "menu": [ {
        "format": "PNG",          
        "click": onPrint
      }, {
        "format": "JPG",          
        "click": onPrint
      }, {
        "format": "SVG",
        "click": onPrint        
      }]      
    }]
  }]
}

这适用于 PNG 和 JPG 格式，但在导出为 SVG 时会出现问题。具体来说，图表标题的下划线延伸到标题末尾之外，并且在标题的中点周围似乎有一个删除线（例如，通过 "Chart" 的字母 "Cha"如上面的 Codepen 示例所示）。奇怪的是，在 Adobe Illustrator CS6 中查看下载的 SVG 文件时会出现这种情况，但在 Inkscape 中则不会（均在 Windows 10 桌面上）。它似乎与浏览器无关（在 Windows 10 桌面上使用 Firefox、Chrome、Opera 和 IE 的结果相同）。

Amcharts.com 支持无法重现该问题。任何建议或解决方法将不胜感激。

Answer 1

我可以在 Firefox 中看到它，但是 Chrome 和 IE11 对我来说没问题 (Win 7)。

我认为这实际上可能是 Firefox 正在做正确的事情而其他渲染器可能不是的情况（请参阅此答案末尾的注释）。

SVG 中显示标题的部分如下所示：

    <g transform=" matrix(1 0 0 1 823 20) ">
    <text font-family="Verdana" font-size="22" font-weight="bold" text-decoration="underline" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10;fill:#000000;fill-opacity:1; fill-rule: nonzero; opacity: 1" >
        <tspan x="-63.72" y="10.48" fill="rgba(0,0,0,1)">Test Chart</tspan>
    </text>
</g>

请注意，包含标题文本的 <tspan> 前后有空格。

然而 parent <text> 元素具有 text-decoration="underline".

样式

这很重要的原因是文件顶部发生的事情。根 <svg> 元素声明：xml:space="preserve"。通过这样做，它告诉渲染器所有空格都很重要并且应该保留。因此应该呈现 <tspan> 前后的空格 - 包括它们的下划线。

你得到删除线效果的原因是因为 tspan 之前的空格被加了下划线，然后 tspan 在显示标题的其余部分之前将文本位置向下和向左更改。

解决方法是：

去掉<tspan>前后的空格，或者
将 xml:space 属性更改为 default，这将导致空格被抑制。

tl;dr

图表库的 SVG 导出器中存在错误。你应该报告它。

Chrome

xml:space 属性在即将发布的 SVG2 规范中已弃用。这可能是它不影响 Chrome and/or 其他一些浏览器的原因之一。 Chrome，特别是已经开始实施一些 SVG2 功能。但是我不确定删除 xml:space 是否是其中之一。

导出为 SVG 时在 amcharts.com 图表标题中添加下划线工件

Underline Artifacts In amcharts.com Chart Title When Exporting As SVG

javascript

css

svg

amcharts