javascript - 使用canvg 将Highchart SVG 转PNG 时，所有文本出现两次 - 如何解决？

Question

这是我的( chop 的)示例 SVG 图像(使用 Highcharts，http://www.highcharts.com/ 制作)- 当我将其渲染到 Canvas 上时(使用 canvg(https://github.com/gabelerner/canvg 和从此处改编的代码:https://stackoverflow.com/a/8997520/2067690)，结果中的所有文本PNG 是重复的，这意味着它的输出是双重的，一段文本紧接着再次出现相同的文本。我如何确保它只出现一次？

<svg height="400" width="1170" version="1.1" xmlns="http://www.w3.org/1999/svg">
<text zIndex="8" text-anchor="end" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:9px;cursor:pointer;color:#909090;fill:#909090;" y="22" x="220">
  <tspan x="220">Highcharts.com</tspan>
</text>
</svg>

Answer 1

这个问题有点老了，但我也发现我的图表中有这个双文本错误很烦人。我查看了代码并将其修改为与 tspan 一起使用。我并没有真正深入研究它，所以我不了解库中发生的所有机制，但我注意到对于“tspan”，在某些时候，创建的对象是:

• 好吧，一个对象，具有“tspan”类型和文本属性。
• 并且该对象还包含另一个对象，即 tspan 的文本值(与前面的文本属性相同)

所以我所做的就是修改库的源代码。如果您搜索

// tspan 
svg.Element.tspan = function(node) {

然后你只需要在函数中添加这个(替换旧内容):

if ( node.nodeName == "tspan")
    this.text = '' ;
else
    this.text = node.value || node.text || node.textContent || '';

这解决了我的问题。我希望这对某人有所帮助。