For example, I added a circle on the fabric.Canvas.
For this circle, the toJSON() gives me the following info:
{
type: 'circle',
version: '4.6.0',
originX: 'left',
originY: 'top',
left: 241.21,
top: 141.63,
width: 100,
height: 100,
fill: 'blue',
stroke: null,
strokeWidth: 0,
strokeDashArray: null,
strokeLineCap: 'butt',
strokeDashOffset: 0,
strokeLineJoin: 'miter',
strokeUniform: false,
strokeMiterLimit: 4,
scaleX: 1,
scaleY: 1,
angle: 0,
flipX: false,
flipY: false,
opacity: 1,
shadow: null,
visible: true,
backgroundColor: '',
fillRule: 'nonzero',
paintFirst: 'fill',
globalCompositeOperation: 'source-over',
skewX: 0,
skewY: 0,
radius: 50,
startAngle: 0,
endAngle: 6.283185307179586,
id: 'CanvasCircle:01FFY0FCHMX0HV285Q85E3C23A'
}
The toSVG() gives a SVG string like this:
'<g transform="matrix(1 0 0 1 291.21 191.63)" id="CanvasCircle:01FFY0FCHMX0HV285Q85E3C23A" >\n<circle style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,255); fill-rule: nonzero; opacity: 1;" cx="0" cy="0" r="50" />\n</g>\n'
My question is how to render this SVG string as a SVG in React.js?
I am doing something like this, the height and width is the params for this canvas circle:
<div
style={{
height,
width,
zIndex: 11,
}}
dangerouslySetInnerHTML={{
__html:`<svg width="${width}px" height="${height}px" viewBox="0 0 ${width} ${height}" >${svgString}</svg>`,
}}
/>
It renders like this in the HTML
<div style="height: 100px; width: 100px; z-index: 11;"><svg width="100px" height="100px" viewBox="0 0 100 100"><g transform="matrix(1 0 0 1 351.53 205.4)" id="CanvasCircle:01FFY1BD3EQW39JGWJ0AWQ2R1B">
Which does not show anything on the page, seems the cx and cy are wrong? So they should be 50, changing this to 50 indeed gives me the SVG?
However, I ended up solving it by rendering the SVG on my own, it works now,
Still wonder what is the fabric.js way of doing it, or this toSVG() suppose to be broken? What am I missing here? Thanks