Clone node: Setting className for SVG element raises error #1868

KagamiChan · 2019-06-01T06:58:16Z

Please make sure you are testing with the latest release of html2canvas.
Old versions are not supported and issues reported for them will be closed.

Please follow the general troubleshooting steps first:

You are using the latest version
You are testing using the non-minified version of html2canvas and checked any potential issues reported in the console

Bug reports:

Setting className for SVG element will raise error, here's some stack trace, I'm using the non minified js version. I thinks the reason is probably I'm using fontawesome 5 SVG icon

MY_PROJECT_PATH/lib/html2canvas.js:5304 Uncaught (in promise) TypeError: Cannot assign to read only property 'className' of object '#<SVGSVGElement>'
    at DocumentCloner.resolvePseudoContent (VM4414 html2canvas.js:5304)
    at DocumentCloner.cloneNode (VM4414 html2canvas.js:5200)
    at DocumentCloner.cloneNode (VM4414 html2canvas.js:5207)
    at DocumentCloner.cloneNode (VM4414 html2canvas.js:5207)
    at DocumentCloner.cloneNode (VM4414 html2canvas.js:5207)
    at DocumentCloner.cloneNode (VM4414 html2canvas.js:5207)
    at DocumentCloner.cloneNode (VM4414 html2canvas.js:5207)
    at DocumentCloner.cloneNode (VM4414 html2canvas.js:5207)
    at DocumentCloner.cloneNode (VM4414 html2canvas.js:5207)
    at DocumentCloner.cloneNode (VM4414 html2canvas.js:5207)
    at DocumentCloner.cloneNode (VM4414 html2canvas.js:5207)
    at DocumentCloner.cloneNode (VM4414 html2canvas.js:5207)
    at DocumentCloner.cloneNode (VM4414 html2canvas.js:5207)
    at DocumentCloner.cloneNode (VM4414 html2canvas.js:5207)
    at DocumentCloner.cloneNode (VM4414 html2canvas.js:5207)
    at DocumentCloner.cloneNode (VM4414 html2canvas.js:5207)
    at new DocumentCloner (VM4414 html2canvas.js:5006)
    at VM4414 html2canvas.js:6900
    at step (VM4414 html2canvas.js:83)
    at Object.next (VM4414 html2canvas.js:64)
    at VM4414 html2canvas.js:57
    at new Promise (<anonymous>)
    at __awaiter (VM4414 html2canvas.js:53)
    at renderElement (VM4414 html2canvas.js:6857)
    at html2canvas (VM4414 html2canvas.js:6854)

Specifications:

html2canvas version tested with: 1.0.0-rc3
Browser & version: Electron 4 / Chromium 69
Operating system: macOS

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

bguyan · 2019-06-05T12:10:02Z

Im getting the same problem

NanChen6 · 2019-06-05T19:17:13Z

getting the same error
Uncaught (in promise) TypeError: Cannot assign to read only property 'className' of object '#'

sunnyqinghuan · 2019-06-06T02:34:08Z

getting the same problem
TypeError: Cannot assign to read only property 'className' of object '#'

sagarp2901 · 2019-06-08T02:52:09Z

I updated html2canvas to latest version 1.0.0-rc3 and started seeing this issue.

Console Error:
core.js:1673 ERROR Error: Uncaught (in promise): TypeError: Cannot assign to read only property 'className' of object '[object SVGSVGElement]'
TypeError: Cannot assign to read only property 'className' of object '[object SVGSVGElement]'
at DocumentCloner.resolvePseudoContent (html2canvas.js:5304)
at DocumentCloner.cloneNode (html2canvas.js:5200)
at DocumentCloner.cloneNode (html2canvas.js:5207)
at DocumentCloner.cloneNode (html2canvas.js:5207)
at DocumentCloner.cloneNode (html2canvas.js:5207)
at DocumentCloner.cloneNode (html2canvas.js:5207)
at DocumentCloner.cloneNode (html2canvas.js:5207)
at DocumentCloner.cloneNode (html2canvas.js:5207)
at DocumentCloner.cloneNode (html2canvas.js:5207)
at DocumentCloner.cloneNode (html2canvas.js:5207)
at resolvePromise (zone.js:831)
at resolvePromise (zone.js:788)
at zone.js:892
at ZoneDelegate.push.../../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Object.onInvokeTask (core.js:3811)
at ZoneDelegate.push.../../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
at Zone.push.../../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
at drainMicroTaskQueue (zone.js:601)
at push.../../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:502)
at ZoneTask.invoke (zone.js:487)

eralvarez · 2019-06-12T18:57:05Z

Hello guys, 1.0.0-alpha.12 works just fine

nvgopi · 2019-06-18T10:18:49Z

Hello guys, 1.0.0-alpha.12 works just fine

Thanks. It worked for me.

aosatinsky · 2019-07-12T00:18:52Z

Same problem here

DMPR-dev · 2019-07-12T15:49:24Z

I caught this error with the text: Torten dekorieren mit Fondant - 6 süße Inspirationen

Probably it's related to this word -> süße, got fixed once I removed it

moosetunes · 2019-07-15T19:56:34Z

Latest non-min doesn't work for me regarding same issue. 1.0.0-alpha.12 didn't help either.

Update: Removing references to modernizr allowed me to get latest html2canvas to work. Cheers.

ahardin13 · 2019-07-17T17:28:19Z

This issue occurs for me when there is a <rect> element. I've linked a possible fix I'm trying.

KyleTraynor · 2019-07-22T22:58:31Z

I'm having the same problem. I tried 1.0.0-alpha.12 and v1.0.0-rc.3

subramanya4shenoy · 2019-08-06T09:46:41Z

Did not work for me, any solutions will be appreciated

nora-white · 2019-08-12T16:24:16Z

I'm also receiving the same error. Only seems to occur with rc.2 and rc.3 releases. I want to update to rc.3 to fix an issue with font-family not displaying correctly, but then exporting svgs breaks with certain elements. I've reverted to rc.1. Running Chrome on Mac.

subramanya4shenoy · 2019-08-12T17:27:12Z

As it was beta and alpha, I took their js file and included it in my angular project. + before calling the html2canvas method I ran this method out side the ngZone.
Kind of fixed the issue, U can try as well u can change the code as per your need

FabioGuerreiro · 2019-08-22T15:43:02Z

I'm also receiving the same error. Only seems to occur with rc.2 and rc.3 releases. I want to update to rc.3 to fix an issue with font-family not displaying correctly, but then exporting svgs breaks with certain elements. I've reverted to rc.1. Running Chrome on Mac.

I confirm that reverting to rc.1 fixed it for me as well, tested with Chrome on win10.

kevalForever · 2019-08-30T14:15:50Z

Hello guys, 1.0.0-alpha.12 works just fine.
There is Issue in 1.0.0-rc.0 to 1.0.0-rc.3.
Then don't go for Latest version.

FrantisekVrab · 2019-09-03T12:47:11Z

Well, i dont have any SVG that is used in canvas, however i'm getting this error... (this behaviour is on chrome, it works on FF). - 1.0.0-rc.3

because the latest version raise this issue niklasvh/html2canvas#1868

ngspinu · 2019-10-03T08:53:14Z

This is still an issue on: 1.0.0-rc.5.
Any chance of getting it fixed?

subramanya4shenoy · 2019-10-03T12:16:16Z

Hey! I switched to htmltoImage as this reo doesn't look like will be updated or fixed. Not it will come out of RC version

…

On Thu, 3 Oct 2019, 2:23 pm Nicu Spinu, ***@***.***> wrote: This is still an issue on: 1.0.0-rc.5. Any chance of getting it fixed? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#1868?email_source=notifications&email_token=ABIHC5PIQDVTRNMXBDMQKE3QMWXJFA5CNFSM4HR732BKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEAHPX2A#issuecomment-537852904>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABIHC5LJUK6VAE4NLU3NCT3QMWXJFANCNFSM4HR732BA> .

CoveMB · 2019-10-07T14:39:44Z

Hey!

I had the same problem in a React app.

I had some FontAwesomeIcon on my page, removing them fixed the problem.

(even if the font icons were not in the selected element that I wanted to canvas)

…es error

hal1984 · 2019-10-15T14:05:35Z

I have created a pull request that fix this error.

#2034

rafaelncarvalho · 2019-11-07T19:44:26Z

Any news about the PR?

maxaqquepucho · 2019-12-17T23:22:39Z

I have the same issue with html2canvas: 1.0.0-rc.5" in chrome Version 78.0.3904.108 (Official Build) (64-bit)

html2canvas.js?c0e9:5333 Uncaught (in promise) TypeError: Cannot assign to read only property 'className' of object '#<SVGSVGElement>'
    at DocumentCloner.resolvePseudoContent (html2canvas.js?c0e9:5333)
    at DocumentCloner.cloneNode (html2canvas.js?c0e9:5228)
    at DocumentCloner.cloneNode (html2canvas.js?c0e9:5235)
    at DocumentCloner.cloneNode (html2canvas.js?c0e9:5235)
    at DocumentCloner.cloneNode (html2canvas.js?c0e9:5235)
    at DocumentCloner.cloneNode (html2canvas.js?c0e9:5235)
    at DocumentCloner.cloneNode (html2canvas.js?c0e9:5235)
    at DocumentCloner.cloneNode (html2canvas.js?c0e9:5235)
    at DocumentCloner.cloneNode (html2canvas.js?c0e9:5235)
    at DocumentCloner.cloneNode (html2canvas.js?c0e9:5235)

kevalForever · 2019-12-18T04:46:34Z

use dom-to-image API For JS,Angular Which is better than this.

KagamiChan · 2019-12-18T15:43:26Z

@maxaqquepucho It's because the fix is not shipped

@niklasvh could you help create a new release?

lemmingapex · 2020-02-17T17:06:59Z

@niklasvh, will you please release v1.0.0-rc.6 with this fix? What do you need to make this happen soon?

lemmingapex · 2020-02-26T17:11:42Z

@niklasvh, the community using this library expects more frequent updates than you are providing. (>3 months of inactivity) If you are unable to maintain this library on your own, please add some prominent contributors such as @andyedinborough and @cobexer as collaborators: https://github.com/niklasvh/html2canvas/settings/access. Maybe they can provide the maintenance and releases that this library needs. Thank you.

mhmdtshref · 2020-03-15T14:30:40Z

@niklasvh This guy has been cloned the repo of the package, modify it, and he deployed it here: https://www.npmjs.com/package/@trainiac/html2canvas

Thank you @niklasvh <3

BlackHacks · 2020-03-24T05:10:29Z

Thank you @mhmdtshref
Moving to https://www.npmjs.com/package/@trainiac/html2canvas works fine and solves this problem.
@niklasvh seems to refuse or is unwilling to fix this package.

Krishank-Tripathi · 2020-05-18T15:32:48Z

@niklasvh Sir please note that this issue is still raising for version ^1.0.0-rc.5 please open this issue or resolve it by your side
Env...
React @16+
Google Chrome
Cause of issue : while rendering dom
use case :

`printDocument(e){
e.preventDefault();
const input = document.getElementById('releaseDiv');
html2canvas(input)
.then((canvas) => {
.........
});
}

// init
this.printDocument.bind(this);

`

lzhoucs · 2020-06-30T21:19:29Z

I ran into the same issue and can confirm the fix in the latest master branch works for me. Hopefully 1.0.0-rc.6 can be released soon, in the meanwhile I published my fork on npm containing the fix to unblock myself. If anyone is interested, use yarn add @lzhoucs/html2canvas to install, and import html2canvas from "@lzhoucs/html2canvas"; to import.

…es error (niklasvh#2079) * fix: niklasvh#1868 Clone node, Setting className for SVG element raises error * fix: svg element type information

ahardin13 mentioned this issue Jul 17, 2019

Uncaught (in promise) TypeError: Cannot assign to read only property 'className' of object '#<SVGGElement>' #1870

Open

2 tasks

ahardin13 referenced this issue in ahardin13/html2canvas Jul 17, 2019

Added check to use baseVal for svg elements

5efa908

tibdevelopment pushed a commit to TIBHannover/orkg-frontend that referenced this issue Sep 27, 2019

Downgrade html2canvas to 1.0.0-alpha.12

36639cd

because the latest version raise this issue niklasvh/html2canvas#1868

hal1984 pushed a commit to hal1984/html2canvas that referenced this issue Oct 15, 2019

fix: niklasvh#1868 Clone node, Setting className for SVG element rais…

30b3fa0

…es error

hal1984 mentioned this issue Oct 15, 2019

fix: #1868 Clone node, Setting className for SVG element raises error #2034

Closed

1 task

niklasvh closed this as completed in f139b51 Nov 26, 2019

pavitrakumar78 mentioned this issue Feb 13, 2020

Setting className for SVG element raises error devforth/painterro#88

Closed

This was referenced May 27, 2020

Cannot Print document SakhriHoussem/vue-resume#3

Closed

TypeError: Cannot assign to read only property SakhriHoussem/vue-resume#2

Closed

a-pachkov mentioned this issue Sep 23, 2020

Broken canvas image only in production #2360

Closed

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Clone node: Setting className for SVG element raises error #1868

Clone node: Setting className for SVG element raises error #1868

KagamiChan commented Jun 1, 2019

bguyan commented Jun 5, 2019

NanChen6 commented Jun 5, 2019 •

edited

Loading

sunnyqinghuan commented Jun 6, 2019

sagarp2901 commented Jun 8, 2019

eralvarez commented Jun 12, 2019

nvgopi commented Jun 18, 2019

aosatinsky commented Jul 12, 2019

DMPR-dev commented Jul 12, 2019

moosetunes commented Jul 15, 2019 •

edited

Loading

ahardin13 commented Jul 17, 2019

KyleTraynor commented Jul 22, 2019

subramanya4shenoy commented Aug 6, 2019

nora-white commented Aug 12, 2019

subramanya4shenoy commented Aug 12, 2019

FabioGuerreiro commented Aug 22, 2019

kevalForever commented Aug 30, 2019 •

edited

Loading

FrantisekVrab commented Sep 3, 2019 •

edited

Loading

ngspinu commented Oct 3, 2019

subramanya4shenoy commented Oct 3, 2019 via email

CoveMB commented Oct 7, 2019

hal1984 commented Oct 15, 2019

rafaelncarvalho commented Nov 7, 2019

maxaqquepucho commented Dec 17, 2019 •

edited

Loading

kevalForever commented Dec 18, 2019

KagamiChan commented Dec 18, 2019

lemmingapex commented Feb 17, 2020

lemmingapex commented Feb 26, 2020 •

edited

Loading

mhmdtshref commented Mar 15, 2020

BlackHacks commented Mar 24, 2020 •

edited

Loading

Krishank-Tripathi commented May 18, 2020

lzhoucs commented Jun 30, 2020

Clone node: Setting className for SVG element raises error #1868

Clone node: Setting className for SVG element raises error #1868

Comments

KagamiChan commented Jun 1, 2019

Please follow the general troubleshooting steps first:

Bug reports:

Specifications:

bguyan commented Jun 5, 2019

NanChen6 commented Jun 5, 2019 • edited Loading

sunnyqinghuan commented Jun 6, 2019

sagarp2901 commented Jun 8, 2019

eralvarez commented Jun 12, 2019

nvgopi commented Jun 18, 2019

aosatinsky commented Jul 12, 2019

DMPR-dev commented Jul 12, 2019

moosetunes commented Jul 15, 2019 • edited Loading

ahardin13 commented Jul 17, 2019

KyleTraynor commented Jul 22, 2019

subramanya4shenoy commented Aug 6, 2019

nora-white commented Aug 12, 2019

subramanya4shenoy commented Aug 12, 2019

FabioGuerreiro commented Aug 22, 2019

kevalForever commented Aug 30, 2019 • edited Loading

FrantisekVrab commented Sep 3, 2019 • edited Loading

ngspinu commented Oct 3, 2019

subramanya4shenoy commented Oct 3, 2019 via email

CoveMB commented Oct 7, 2019

hal1984 commented Oct 15, 2019

rafaelncarvalho commented Nov 7, 2019

maxaqquepucho commented Dec 17, 2019 • edited Loading

kevalForever commented Dec 18, 2019

KagamiChan commented Dec 18, 2019

lemmingapex commented Feb 17, 2020

lemmingapex commented Feb 26, 2020 • edited Loading

mhmdtshref commented Mar 15, 2020

BlackHacks commented Mar 24, 2020 • edited Loading

Krishank-Tripathi commented May 18, 2020

lzhoucs commented Jun 30, 2020

NanChen6 commented Jun 5, 2019 •

edited

Loading

moosetunes commented Jul 15, 2019 •

edited

Loading

kevalForever commented Aug 30, 2019 •

edited

Loading

FrantisekVrab commented Sep 3, 2019 •

edited

Loading

maxaqquepucho commented Dec 17, 2019 •

edited

Loading

lemmingapex commented Feb 26, 2020 •

edited

Loading

BlackHacks commented Mar 24, 2020 •

edited

Loading