使用canvg将Highchart SVG转换成PNG时，所有文字出现两次-如何解决？答案

【问题标题】：When using canvg to convert Highchart SVG into PNG, all text appears twice - how to solve?使用canvg将Highchart SVG转换成PNG时，所有文字出现两次-如何解决？
【发布时间】：2015-04-18 05:48:00
【问题描述】：

这是我的（截断的）示例 SVG 图像（使用 Highcharts 制作，http://www.highcharts.com/） - 当我将其渲染到画布上时（使用 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>

【问题讨论】：

标签： javascript image svg highcharts canvg

【解决方案1】：

我刚刚在您的导出参数中添加了 textOutline: 'none' ，它对我有用。

Codpen 解决方案 https://codepen.io/kirill-kirs/pen/qBjNdwg

 exporting: {
        sourceWidth: 1000,
        sourceHeight: 1000,
        chartOptions: {
            plotOptions: {
                series: {
                    dataLabels: {
                        enabled: true,
                        backgroundColor: 'rgba(0, 0, 0, 0.75)',
                        style: {
                            textOutline: 'none',
                            color: 'white'
                        }
                    }
                }
            }
        }
    }

【讨论】：

【解决方案2】：

<!-- Client Side Code -->
<script type="text/javascript">
    window.onload = function() {
        //1. Get the Highcharts Graph from the Div containing it
        var chart = $('#IDOfDivContainingHighchartsGraph').highcharts();

        //2. Get SVG from Hicharts Export Service
        var svgString = chart.getSVGForExport();

        //3. Save it client side div to manipulate the fetched string
        $('#exportedSVG').html(svgString);

        //4. LOGIC TO REMOVE THE DUPLICATE TSPAN TAG
        var svgTSPAN_TextElement=$("#exportedSVG text");
        for(i=0;i<svgTSPAN_TextElement.length;i++){
            childTspanElements=$(svgTSPAN_TextElement[i]).children("tspan");
            if(childTspanElements.length==2){
                childTspanElements[1].remove();
            }
        }

        //5. Get the maniupluated object as string
        svgString=$("#exportedSVG svg").get(0).outerHTML;

        //6. POST Maniiulated SVG string
        var url= '/URL/To/Server/Side.php';
        $.ajax({
            type: 'POST',
            data: {svgString:svgString, upload:1},
            url: url,
            async: false,
            success: function(data){
                //Nothing here
            }
        });

    }
</script>

//Server Side Code
<?php
if(isset($_POST["upload"])){
    $SVGData=$_POST["svgString"];
    $locationToSaveFile = "/location/to/Save/SVGFILE.svg";
    file_put_contents($locationToSaveFile, $SVGData);
    exit();
}

//By the end of this code you would have created the svg file of the hicharts on the server side
?>

【讨论】：

【解决方案3】：

这个问题有点老了，但我也发现我的图表中有这个双文本错误很烦人。我查看了代码并对其进行了修改以与 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 || '';

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

【讨论】：

用上面的代码替换给了我这个错误无法读取canvg.js中未定义的属性'replace'在下面的代码svg.compressSpaces = function(s) { return s.replace(/[\s\r\t\n]+/gm,' '); }
我建议把这个函数改成这样：svg.compressSpaces = function(s) { if ( typeof s != "undefined") return s.replace(/[\s\r\t\n]+/gm,' '); else return ''; }。请注意，这只是我提供的一个肮脏的修复，所以我不保证它会很好。

【解决方案4】：

在删除了我的示例 SVG 图像的多个部分后，为了找出错误何时消失，我发现它是 tspan 标签 - 一旦我将它们排除在外，canvg 将按预期只显示一次文本。

【讨论】：