Fabric.js: Inconsistency in Canvas Zoom and SVG Background behavior

Created on 11 Mar 2018  路  3Comments  路  Source: fabricjs/fabric.js

It seems to me that the goal of toSVG() is to replicate the current view of the canvas, including its zoom level, and because of that, setZoom() impacts SVG viewBox in the output.

The problem is, if setBackgroundcolor() is used, the background element stays the same size, regardless of the zoom level, so for cases that zoom is less than 1, the SVG output looks different that canvas view (background is small):
http://jsfiddle.net/Da7SP/1127/

Canvas view:
image

SVG View:
image

A related issue is, if user sets a custom viewBox for SVG output, the background color won't be extended all the way to the edge of the viewBox.

If confirmed as a bug, I think the easiest fix is to change width and height of background to 100%, so both of the above use cases will be covered.

<rect x="0" y="0" width="100%" height="100%" fill="red"></rect>

backport to 1.x

Most helpful comment

just to add that this behaviour of the full viewport is optional with the boolean
canvas.svgViewportTransformation

All 3 comments

@asturur do you have any suggestions on this?

i agree that being the color a color, and supposed to fill, the 100% fix is completely OK.

just to add that this behaviour of the full viewport is optional with the boolean
canvas.svgViewportTransformation

Was this page helpful?
0 / 5 - 0 ratings