TypeError: Cannot set property className of #<SVGElement> which has only a getter
at clonePseudoElement (dom-to-image.js:261)
at dom-to-image.js:251
at Array.forEach (<anonymous>)
at clonePseudoElements (dom-to-image.js:250)
is the error line since svg elements do not have a className
className can also be an instance of SVGAnimatedString if the element is an SVGElement. It is better to get/set the className of an element using Element.getAttribute and Element.setAttribute if you are dealing with SVG elements. However, take into account that Element.getAttribute returns null instead of "" if the element has an empty class attribute.
Use case: description, code
jsfiddle
react-fontawesome generates DOM elements that look like
Expected behavior
The
dom-to-image
conversion works.Actual behavior (stack traces, console logs etc)
The
dom-to-image
conversion fails due toclonePseudoElements
=>clone.className = clone.className + ' ' + className;
is the error line since
svg
elements do not have aclassName
https://developer.mozilla.org/en-US/docs/Web/API/Element/className#Notes
So, I think this should probably be something like
clone.setAttribute("class", (clone.getAttribute("class") || '') + ' ' + className);
Library version
2.6.0
Browsers
Related Pull Requests
https://github.com/tsayen/dom-to-image/pull/190 https://github.com/tsayen/dom-to-image/pull/250 https://github.com/tsayen/dom-to-image/pull/327
Since I need to use this for some production functionality for a product launch coming up, I am going to use https://github.com/1904labs/dom-to-image-more mentioned in https://github.com/tsayen/dom-to-image/pull/250#issuecomment-494556160!