Html2canvas: Text tags in SVG overlap (duplicated / doubling)

Created on 19 Feb 2015 · 24Comments · Source: niklasvh/html2canvas

(Sorry, I am not good at english)

Hello,
I am using this awesome script to render SVG tags
There is some text overlapping when I render the text tag in SVG to canvas
Text tag be processed as a Text node and also SVG
You can see that easily with transform property
2015-02-19 15 08 29_2
Here is sample code (with html2canvas 0.5.0-alpha2)

<html>
<head>
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script type="text/javascript" src="js/html2canvas.js"></script>
</head>
<body>
  <svg width="100" height="100">
    <g transform="translate(20,20)">
      <text dy=".45em" y="10" x="0" dx="-.8em" transform="translate(0,0) rotate(-70)" style="font-size:12px;">Text</text>
    </g>
  </svg>
  <script>
    $(document).ready(function() {
      html2canvas(document.body, {
        onrendered: function(canvas) {
          document.body.appendChild(canvas);
        }
      });
    })
  </script>
</body>
</html

And Here is my quick change

NodeParser.prototype.getChildren = function(parentContainer) {
    return flatten([].filter.call(parentContainer.node.childNodes, renderableNode).map(function(node) {
        var container = [node.nodeType === Node.TEXT_NODE && node.parentElement.tagName !== "text" ? new TextContainer(node, parentContainer) : new NodeContainer(node, parentContainer)].filter(nonIgnoredElement);
        return node.nodeType === Node.ELEMENT_NODE && container.length && node.tagName !== "TEXTAREA" ? (container[0].isElementVisible() ? container.concat(this.getChildren(container[0])) : []) : container;
    }, this));
};

I hope this will help

Needs More Information

Source

hyojin

👍4 ❤2

Most helpful comment

@hyojin
After test it on IE, your fix doesn't works because parentElement property is not populate on the current node. Use parentNode instead ! In any case, it will be more clear because we are into the NodeParser and it talk about node.

Otherwise, instead test on tag name, i change my code to test the instance of parentNode and process the current node has a TextContainer only if the parentNode isn't a SVGElement.

It works on chrome and ie11. on firefox i can't test it because of blank canvas bug !

My code

NodeParser.prototype.getChildren = function(parentContainer) {
    return flatten([].filter.call(parentContainer.node.childNodes, renderableNode).map(function(node) {
        var container = [node.nodeType === Node.TEXT_NODE && !(node.parentNode instanceof SVGElement) ? new TextContainer(node, parentContainer) : new NodeContainer(node, parentContainer)].filter(nonIgnoredElement);
        return node.nodeType === Node.ELEMENT_NODE && container.length && node.tagName !== "TEXTAREA" ? (container[0].isElementVisible() ? container.concat(this.getChildren(container[0])) : []) : container;
    }, this));
};

I hope this helps.

ncoquelet on 6 Aug 2015

❤2

All 24 comments

Thank you#Hyojin. That helps me.

josnabattula on 17 Mar 2015

Thanks ,help me a lot!

natee on 23 Jul 2015

Thanks for your fix !

you can also check on tspan tagName :
node.nodeType === Node.TEXT_NODE && node.parentElement.tagName !== "text" && node.parentElement.tagName !== "tspan"

ncoquelet on 4 Aug 2015

👍1

@ncoquelet I updated my code. Thanks!

hyojin on 5 Aug 2015

Otherwise, instead test on tag name, i change my code to test the instance of parentNode and process the current node has a TextContainer only if the parentNode isn't a SVGElement.

It works on chrome and ie11. on firefox i can't test it because of blank canvas bug !

My code

NodeParser.prototype.getChildren = function(parentContainer) {
    return flatten([].filter.call(parentContainer.node.childNodes, renderableNode).map(function(node) {
        var container = [node.nodeType === Node.TEXT_NODE && !(node.parentNode instanceof SVGElement) ? new TextContainer(node, parentContainer) : new NodeContainer(node, parentContainer)].filter(nonIgnoredElement);
        return node.nodeType === Node.ELEMENT_NODE && container.length && node.tagName !== "TEXTAREA" ? (container[0].isElementVisible() ? container.concat(this.getChildren(container[0])) : []) : container;
    }, this));
};

I hope this helps.

ncoquelet on 6 Aug 2015

❤2

fix my firefox problem, works on ff too :-)

ncoquelet on 6 Aug 2015

More clear!
I also checked that it works well on ff.
I merged your fix and pull request was updated. Thanks :)

hyojin on 12 Aug 2015

👍1

@hyojin @ncoquelet thanks for the investigation into this and the fix. I ran into the exact same problem the other day and I wasn't entirely sure what was causing it.

berendberendsen on 17 Jul 2016

😄1

I am not sure where I am getting confused here but I am getting the exception as "Uncaught ReferenceError: NodeParser is not defined"

Suchetana10 on 2 Aug 2016

@Suchetana10 When did you get the exception? in loading script?

hyojin on 5 Aug 2016

@hyojin thank you.. worked for me

vishwasvadavi on 25 Oct 2016

@hyojin thanks! works perfectly for me too

nugen on 13 Feb 2017

@vishwasvadavi @nugen I'm happy to hear that! :)

hyojin on 14 Feb 2017

Some people still have the issue with text element, I change this issue opened and I will send PR again.

hyojin on 14 Feb 2017

seemasingh123 on 25 Feb 2017

Does anyone have a build of the library with this fix in it that I can test? Seeing same issue on highcharts page..

theinventor on 24 Mar 2017

Is this build available with the fix? I am still facing this issue with highcharts.

Nywlem11 on 2 Aug 2017

Is this fix available in build or we have to create an override ?

sgsmittal on 12 Oct 2017

Is this still an issue with v1.0.0? If so, could you please share an example on jsfiddle.

niklasvh on 12 Dec 2017

This issue has been automatically closed because there has been no response to our request for more information from the original author. With only the information that is currently in the issue, we don't have enough information to take action. Please reach out if you have or find the answers we need so that we can investigate further.

no-response[bot] on 12 Dec 2017

Dear @niklasvh ,

Thank you for this amazing library. I am able to reproduce this issue with the latest version - v1.0.0-rc.3

I have created an example on CodePen here (Chrome only) where you will see that some of the text nodes (in the Graph title) are duplicated.

Steps to reproduce -

Please open the CodePen link - https://codepen.io/karannagupta/pen/RXpddB in Chrome only
Click on Copy to Clipboard button
Wait for the animation to finish (or see console for copied message)
Paste the graph in paint or a document (ctrl + v)

The graph titles are added on Line#193

@hyojin , would you please open the issue again?

Regards,
Karan