问题
Here's my (truncated) example SVG image (made with Highcharts, http://www.highcharts.com/ ) - when I render that onto a canvas (with canvg (https://github.com/gabelerner/canvg and code adapted from here: https://stackoverflow.com/a/8997520/2067690) all text in the resulting PNG is duplicated, meaning that it's output double, one piece of text immediately followed by the same text once again. How can I ensure it appears once only?
<svg height="400" width="1170" version="1.1" xmlns="http://www.w3.org/1999/svg">
<text zIndex="8" text-anchor="end" style="font-family:"Lucida Grande", "Lucida Sans Unicode", 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>
回答1:
This question is a bit old but I also found this pretty annoying to have this double text bug in my graphs. I took a look at the code and modified it to work with tspan. I didn't really dig into it, so I don't understand all the mechanisms taking place in the library, but I noticed that for "tspan", at some point, the object created was :
- Well, an object, with a type "tspan" and a text attribute.
- And that object also contained an other object, which is the text value of the tspan (which is then the same as the previous text attribute)
So what I did is to modify the source code of the library. If you search for
// tspan
svg.Element.tspan = function(node) {
Then you just have to add this inside the function (replacing the old content) :
if ( node.nodeName == "tspan")
this.text = '' ;
else
this.text = node.value || node.text || node.textContent || '';
And that solved my problem. I hope that helps someone.
回答2:
After much deleting parts of my example SVG image, to find when the error would go away, I found that it's the tspan tags - once I leave them out, canvg will display text only once as intended.
来源：https://stackoverflow.com/questions/28563073/when-using-canvg-to-convert-highchart-svg-into-png-all-text-appears-twice-how