toDataURL fails with "Uncaught DOMException: Failed to execute 'createPattern' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0." with some SVGs

[graphics-et-al]

Version

4.6.0 and higher

Test Case

https://jsfiddle.net/wilheim/czvoyL3n/46/

Information about environment

Browser, Chrome

Steps To Reproduce

1. Load an SVG using fabric.loadSVGFromString that has something in it that v4.6.0+ doesn't like. Dunno what it is but example is included
2. Make it small- the size it's loaded is small enough. The error does not happen when the loaded object is scaled to above a certain size
3. Attempt canvas.toDataURL

Expected Behavior

Expected: a dataURL to save as an image of the board

Actual Behavior

Got: an error. Error in console (using uncompressed FabricJS 5.1.0) is:

Uncaught DOMException: Failed to execute 'createPattern' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.
    at klass._applyPatternForTransformedGradient (http://localhost:8080/js/board/fabric.5.1.0.js:15923:30)
    at klass._setStrokeStyles (http://localhost:8080/js/board/fabric.5.1.0.js:15662:18)
    at klass._renderStroke (http://localhost:8080/js/board/fabric.5.1.0.js:15885:12)
    at klass._renderPaintInOrder (http://localhost:8080/js/board/fabric.5.1.0.js:15828:14)
    at klass._render (http://localhost:8080/js/board/fabric.5.1.0.js:19789:12)
    at klass.drawObject (http://localhost:8080/js/board/fabric.5.1.0.js:15551:12)
    at klass.render (http://localhost:8080/js/board/fabric.5.1.0.js:15409:14)
    at klass.drawObject (http://localhost:8080/js/board/fabric.5.1.0.js:20360:26)
    at klass.renderCache (http://localhost:8080/js/board/fabric.5.1.0.js:15424:14)
    at klass.render (http://localhost:8080/js/board/fabric.5.1.0.js:15403:14)

Even if I knew what teh problem in the SVG was, that would be great!

[melchiar]

this bug seems to have started with 4.5.1, so likely related to #7030

[ShaMan123]

duplicate #7624

[graphics-et-al]

duplicate #7624

I'm not convinced it's a duplicate but possibly related/same root cause. In this case bug, you can make the svg as small as you like, it's only when you do a snapshot that it falls over.

I'm digging into what makes the 'bad' svg 'bad'- I think it's when a gradient refers to another gradient (which is silly but apparently a thing) e.g.

<linearGradient id="linear-gradient-6" x1="305.8" x2="502.7" y1="97" y2="97" gradientUnits="userSpaceOnUse">
   <stop offset="0" stop-color="#a0a0a0"/>
   <stop offset="1" stop-color="#828282"/>
 </linearGradient>
 <linearGradient xlink:href="#linear-gradient-6" id="linear-gradient-8" x1="296.2" x2="512.3" y1="420.7" y2="420.7"/>

When I take anything that uses 'linear-gradient-8' out, everything works as expected.

[graphics-et-al]

Found what caused the problem- if a path in an SVG has a gradient for a stroke it fails. Will close this and open a new, more specific issue.