Fabric.js loadSVGFromURL - text has wrong size

Viewed 24

when loading an SVG file (designed in Inkscape) with the Fabric.js function loadSVGFromURL(), the including text gets rendered larger than in Inkscape.

here you can see a screenshot from Inkscape:

SVG in Inkscape

This is how it looks like in Fabric.js:

SVG in Fabric

However, I also recognized, that the SVG looks slightly different in Chrome (different than Inkscape and different than Fabric.js):

SVG in Chrome

this is what the SVG looks like:

<svg xmlns="http://www.w3.org/2000/svg" width="30" height="45" id="svg4136" version="1.1">
<defs id="defs4138">
    <marker orient="auto" refY="0" refX="0" id="Arrow1Mend" style="overflow:visible">
        <path id="path4750" d="m0 0 5-5-17.5 5L5 5Z" style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1" transform="matrix(-.4 0 0 -.4 -4 0)"/>
    </marker>
    <marker orient="auto" refY="0" refX="0" id="Arrow2Mend" style="overflow:visible">
        <path id="path4768" style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.625;stroke-linejoin:round;stroke-opacity:1" d="M8.719 4.034-2.207.016 8.719-4.002c-1.746 2.372-1.736 5.618 0 8.036z" transform="scale(-.6)"/>
    </marker>
    <marker orient="auto" refY="0" refX="0" id="Arrow1Send" style="overflow:visible">
        <path id="path4756" d="m0 0 5-5-17.5 5L5 5Z" style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1" transform="matrix(-.2 0 0 -.2 -1.2 0)"/>
    </marker>
    <marker orient="auto" refY="0" refX="0" id="Arrow1Lstart" style="overflow:visible">
        <path id="path4741" d="m0 0 5-5-17.5 5L5 5Z" style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1" transform="matrix(.8 0 0 .8 10 0)"/>
    </marker>
    <marker orient="auto" refY="0" refX="0" id="Arrow1Lend" style="overflow:visible">
        <path id="path4744" d="m0 0 5-5-17.5 5L5 5Z" style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1" transform="matrix(-.8 0 0 -.8 -10 0)"/>
    </marker>
</defs>
<g id="layer1">
    <path style="fill:#cecece;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.6;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" id="rect4197" d="M0 0h30v45H0z"/>
    <text id="text4996-5" y="51.248" x="-35.24" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:0%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;white-space:pre;inline-size:60.4796;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" xml:space="preserve" transform="rotate(-90 -22.186 10.427)"><tspan x="-35.24" y="51.248"><tspan style="font-size:10px;line-height:1.25">###LABEL</tspan></tspan></text>
</g>

Does anybody know what causes this behavior?

Thanks and all the best,

Kevin

0 Answers
Related