Text tags in SVG overlap (duplicated / doubling) #541

hyojin · 2015-02-19T06:51:34Z

(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

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

The text was updated successfully, but these errors were encountered:

josnabattula · 2015-03-17T02:09:47Z

Thank you#Hyojin. That helps me.

natee · 2015-07-23T06:03:07Z

Thanks ,help me a lot!

ncoquelet · 2015-08-04T14:56:44Z

Thanks for your fix !

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

hyojin · 2015-08-05T09:05:25Z

@ncoquelet I updated my code. Thanks!

ncoquelet · 2015-08-06T08:34:15Z

@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 · 2015-08-06T12:32:52Z

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

hyojin · 2015-08-12T08:53:13Z

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

berendberendsen · 2016-07-17T07:39:23Z

@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.

Suchetana10 · 2016-08-02T19:27:40Z

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

hyojin · 2016-08-05T00:11:31Z

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

vishwasvadavi · 2016-10-25T09:42:09Z

@hyojin thank you.. worked for me

nugen · 2017-02-13T11:52:24Z

@hyojin thanks! works perfectly for me too

hyojin · 2017-02-14T00:22:34Z

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

hyojin · 2017-02-14T01:49:05Z

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

seemasingh123 · 2017-02-25T11:40:38Z

theinventor · 2017-03-24T13:28:42Z

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

Nywlem11 · 2017-08-02T12:30:55Z

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

sgsmittal · 2017-10-12T15:13:59Z

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

niklasvh · 2017-12-12T08:11:48Z

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

no-response · 2017-12-12T17:05:37Z

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.

karannagupta · 2019-09-10T10:04:34Z

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

hyojin · 2019-09-10T23:50:12Z

Hi @karannagupta
Could you try my branch to check whether it comes from the same reason?

karannagupta · 2019-09-11T04:38:55Z

Hi @hyojin

With your version of the library (v0.5.0-alpha2) it doesn't work. You can test your library on my Pen here

Also, I would like to use the latest version of html2canvas. I also don't need to use html2canvas.svg then.

Regards,
Karan

karannagupta · 2019-09-11T11:08:35Z

Turns out it is an issue with Unicode fonts

hyojin added a commit to hyojin/html2canvas that referenced this issue Jun 23, 2015

Fix niklasvh#541

3815d3f

hyojin added a commit to hyojin/html2canvas that referenced this issue Jun 23, 2015

Fix niklasvh#541

6ff1713

hyojin added a commit to hyojin/html2canvas that referenced this issue Jun 23, 2015

Fix niklasvh#541

1474072

ncoquelet pushed a commit to ncoquelet/html2canvas that referenced this issue Aug 4, 2015

Fix niklasvh#541

85708ea

ncoquelet mentioned this issue Aug 4, 2015

Glitches on rendering a canvas based off on SVG #640

Closed

ncoquelet pushed a commit to ncoquelet/html2canvas that referenced this issue Aug 7, 2015

Fix niklasvh#541

a1db38b

hyojin closed this as completed Feb 14, 2017

hyojin changed the title ~~Text tag in SVG overlaps~~ Text tags in SVG overlap (duplicated / doubling) Feb 14, 2017

hyojin reopened this Feb 14, 2017

TagadaDubdub mentioned this issue Nov 27, 2017

There are some defects when page have highchart's charts. #1277

Closed

niklasvh added the Needs More Information label Dec 12, 2017

no-response bot closed this as completed Dec 12, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Text tags in SVG overlap (duplicated / doubling) #541

Text tags in SVG overlap (duplicated / doubling) #541

hyojin commented Feb 19, 2015

josnabattula commented Mar 17, 2015

natee commented Jul 23, 2015

ncoquelet commented Aug 4, 2015

hyojin commented Aug 5, 2015

ncoquelet commented Aug 6, 2015

ncoquelet commented Aug 6, 2015

hyojin commented Aug 12, 2015

berendberendsen commented Jul 17, 2016 •

edited

Suchetana10 commented Aug 2, 2016

hyojin commented Aug 5, 2016

vishwasvadavi commented Oct 25, 2016

nugen commented Feb 13, 2017

hyojin commented Feb 14, 2017

hyojin commented Feb 14, 2017

seemasingh123 commented Feb 25, 2017

theinventor commented Mar 24, 2017

Nywlem11 commented Aug 2, 2017

sgsmittal commented Oct 12, 2017

niklasvh commented Dec 12, 2017

no-response bot commented Dec 12, 2017

karannagupta commented Sep 10, 2019 •

edited

hyojin commented Sep 10, 2019

karannagupta commented Sep 11, 2019

karannagupta commented Sep 11, 2019

Text tags in SVG overlap (duplicated / doubling) #541

Text tags in SVG overlap (duplicated / doubling) #541

Comments

hyojin commented Feb 19, 2015

josnabattula commented Mar 17, 2015

natee commented Jul 23, 2015

ncoquelet commented Aug 4, 2015

hyojin commented Aug 5, 2015

ncoquelet commented Aug 6, 2015

ncoquelet commented Aug 6, 2015

hyojin commented Aug 12, 2015

berendberendsen commented Jul 17, 2016 • edited

Suchetana10 commented Aug 2, 2016

hyojin commented Aug 5, 2016

vishwasvadavi commented Oct 25, 2016

nugen commented Feb 13, 2017

hyojin commented Feb 14, 2017

hyojin commented Feb 14, 2017

seemasingh123 commented Feb 25, 2017

theinventor commented Mar 24, 2017

Nywlem11 commented Aug 2, 2017

sgsmittal commented Oct 12, 2017

niklasvh commented Dec 12, 2017

no-response bot commented Dec 12, 2017

karannagupta commented Sep 10, 2019 • edited

hyojin commented Sep 10, 2019

karannagupta commented Sep 11, 2019

karannagupta commented Sep 11, 2019

berendberendsen commented Jul 17, 2016 •

edited

karannagupta commented Sep 10, 2019 •

edited