Fabric.js loadSVGFromURL - text has wrong size - svg
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
Related
SVG pathLength on circle not defining circle's circumference?
According to https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle, the pathLength attribute is supposed to define the "total length for the circle's circumference", however, when I use stroke-dasharray, it doesn't seem to line up? <svg width="100" height="100" viewBox="0 0 1 1"> <circle cx="0.5" cy="0.5" stroke-width="0.5" r="0.25" pathLength="360" stroke-dasharray="180 360" stroke-dashoffset="0" stroke="black" fill="none" /> </svg> According to https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/pathLength as well, this should be half-filled, thus a semi-circle, however it's slightly less than a semi-circle. If I have stroke-dasharray set to 360 360 instead, it doesn't fully close when, if I understand how the pathLength attribute is supposed to work, it should. Am I misunderstanding pathLength or stroke-dasharray? Edit: it seems to work differently across browsers...? Chromium: Firefox: Safari: Edit 2: When I get their total lengths, it's different across browsers! Is this intended? Is it possible to solve this issue?
As #enxaneta commented. The smaller the viewBox, the bigger the problem is. In this example it is only the last one (viewBox="0 0 100 100") that looks OK in Chrome. <svg xmlns="http//www.w3.org/2000/svg" width="130" viewBox="0 0 1 1"> <path d="M0 .5 L1 .5" stroke-width=".01" stroke="gray"/> <circle cx=".5" cy=".5" r=".4" stroke="black" stroke-width=".2" fill="none" stroke-dasharray="180 360" pathLength="360" /> </svg> <svg xmlns="http//www.w3.org/2000/svg" width="130" viewBox="0 0 10 10"> <path d="M0 5 L10 5" stroke-width=".1" stroke="gray"/> <circle cx="5" cy="5" r="4" stroke="black" stroke-width="2" fill="none" stroke-dasharray="180 360" pathLength="360" /> </svg> <svg xmlns="http//www.w3.org/2000/svg" width="130" viewBox="0 0 50 50"> <path d="M0 25 L50 25" stroke-width=".5" stroke="gray"/> <circle cx="25" cy="25" r="20" stroke="black" stroke-width="10" fill="none" stroke-dasharray="180 360" pathLength="360" /> </svg> <svg xmlns="http//www.w3.org/2000/svg" width="130" viewBox="0 0 100 100"> <path d="M0 50 L100 50" stroke-width="1" stroke="gray"/> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="20" fill="none" stroke-dasharray="180 360" pathLength="360" /> </svg>
How to fix SVG marker orientation in MS Edge?
Trying a basic example from Mozilla Docs and the top arrow is not oriented correctly (only in Ms Edge browser) : https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/orient Is there any way to fix it for that browser?
Apparently orient="auto-start-reverse" doesn't work in edge so you will need to use orient="auto". For this instead of a polyline I'm using 2 lines with the origin in 10,90
svg{width:300px}
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5"
markerWidth="6" markerHeight="6"
orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
<marker id="dataArrow" viewBox="0 0 10 10" refX="5" refY="5"
markerWidth="6" markerHeight="6"
orient="-65deg">
<path d="M 0 0 L 10 5 L 0 10 z" fill="red" />
</marker>
</defs>
<line x1="10" y1="90" x2="90" y2="90" fill="none" stroke="black"
marker-end="url(#arrow)" marker-end="url(#arrow)" />
<line x1="10" y1="90" x2="10" y2="10" fill="none" stroke="black"
marker-end="url(#arrow)" marker-end="url(#arrow)" />
<polyline points="15,80 29,50 43,60 57,30 71,40 85,15" fill="none" stroke="grey"
marker-start="url(#dataArrow)" marker-mid="url(#dataArrow)"
marker-end="url(#dataArrow)" />
</svg>
See this pen: https://codepen.io/AmeliaBR/details/qjXoQd
"auto-start-reverse SVG marker ...... Doesn't work in Edge/IE (and other older browsers) and doesn't fallback nicely (you get a non-rotating marker instead)."
SVG: repeating markers through the line/path
I'm trying to build svg-line (or path - doesn't matter) with repeating markers along it's entire length. What is the best way to implement it? There is a description of marker-pattern property on w3. It looks perfect but for some reason I can't get the correct result in my code. Furthermore, I don't see any markers, replicating the w3 example: https://jsfiddle.net/pLaukq8p/ <svg xmlns="http://www.w3.org/2000/svg" width="600" height="200"> <marker id="DoubleDash" markerWidth="8" markerHeight="12" refX="0" refY="0" viewBox="-4 -6 8 12" markerUnits="userSpaceOnUse" orient="auto"> <rect x="-3" y="-5" width="2" height="10"/> <rect x="1" y="-5" width="2" height="10"/> </marker> <marker id="SingleDash" markerWidth="4" markerHeight="12" refX="0" refY="0" viewBox="-2 -6 4 12" markerUnits="userSpaceOnUse" orient="auto"> <rect x="-1" y="-5" width="2" height="10"/> </marker> <path d="M 50,100 S 100,132 150,86 200,173 250,76 300,81 350,136 400,87 450,166 500,87 550,96" stroke="deeppink" stroke-width="2" fill="none" marker-pattern="40 url(#DoubleDash) 40 url(#SingleDash)"/> </svg>
SVG inverse marker mask/clip-path
I've tried unsuccessfully to replace the white triangle, the marker-start, with an inverse mask/clip-path in order to cut the end of the arrow in shape of the marker instead of painting it white. Not sure if marker masks can be defined. <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="mySVG" viewBox="-100 0 200 200" height="600" width="700"> <defs> <marker refY="0.5" refX="0.0" markerHeight="4" markerWidth="2" orient="auto" id="head"> <path fill="#D0D0D0" d="M0,0 L0.5,0.5 L0,1 L-0.5,0.5 Z"/> </marker> <marker refY="0.6" refX="0.1" markerHeight="4" markerWidth="2" orient="auto" id="tail"> <clip-Path id="cp1" d="M0 0 V1.3 L0.6 0.6 Z"> <path fill="white" d="M0 0 V1.3 L0.6 0.6 Z" /> <clip-Path> </marker> </defs> <path id="myArrow" marker-start="url(#tail)" marker-end="url(#head)" d="M -66.38265586443396 22.21132594835645 A 70 70 0 0 0 66.38265586443396 22.21132594835645" fill="none" stroke="#D0D0D0" stroke-width="8" clip-path="url(#cp1)"/>
Markers are independent symbols which are positioned and drawn at the various points in the path after the path has been drawn. It sounds like you are trying to use them to clip out bits of the path. This is futile. That's not how markers work, I'm afraid.
Some elements not visible in browser in svg image
I have svg file exported from flash, I can open that file in Inkscape and I see clouds and a girl. In browsers the girl is visible but the clouds not. In svg they are the same symbol in defs with two groups, and a use element with xlink:href The cloud that are not visible look like this: <defs transform="matrix(1 0 0 1 0 0) "> <symbol id="Symbol__202" viewBox="0 0 94.9 52.4"> <g id="Warstwa.__202"> <g id="group1"> <path id="path27" fill="#FFFFFF" fill-opacity="1" d="M440.5,18.3 Q440.5,15 438.1,12.6 C436.55,11.05 434.7,10.3 432.5,10.3 430.25,10.3 428.35,11.05 426.75,12.6 426.15,13.25 425.65,14 425.25,14.8 425.2,11.1 423.85,7.95 421.25,5.35 418.6,2.7 415.35,1.35 411.5,1.35 407.75,1.35 404.55,2.7 401.9,5.35 400.35,6.9 399.3,8.6 398.65,10.45 397.3,9.6 395.75,9.2 394.05,9.2 392.6,9.2 391.25,9.5 390.05,10.15 389.9,7.8 388.95,5.8 387.3,4.1 385.5,2.25 383.3,1.35 380.7,1.35 378.15,1.35 375.9,2.25 374.05,4.1 372.8,5.4 371.95,6.85 371.55,8.5 368.95,6.85 366,6.05 362.7,6.05 358,6.05 353.95,7.7 350.6,11.05 347.25,14.45 345.6,18.5 345.6,23.25 345.6,27.95 347.25,32 350.6,35.45 353.95,38.8 358,40.45 362.7,40.45 366.9,40.45 370.55,39.1 373.7,36.45 372.1,38.4 371.3,40.65 371.3,43.2 371.3,46.1 372.3,48.55 374.35,50.6 376.5,52.7 379,53.75 381.85,53.75 384.75,53.75 387.25,52.7 389.35,50.6 391.4,48.55 392.45,46.1 392.45,43.2 392.45,42.65 392.4,42.2 392.35,41.75 393.3,41.3 394.25,40.7 395.15,40.05 395.7,42.65 397.05,44.95 399.1,47 402,49.9 405.5,51.35 409.55,51.35 413.65,51.35 417.15,49.9 420.05,47 421.05,46.05 421.85,45 422.5,43.85 423.65,44.25 424.85,44.45 426.1,44.45 429.1,44.45 431.65,43.35 433.75,41.2 435.9,39.1 437,36.55 437,33.55 437,30.7 436,28.25 434,26.15 435.55,25.85 436.9,25.1 438.1,23.95 439.7,22.4 440.5,20.55 440.5,18.3z M385.45,18.8 L385.45,18.9 385.35,18.9 385.45,18.8z M375.5,34.75 C375.7,34.45 375.9,34.2 376.15,34 376.2,34.05 376.25,34.1 376.25,34.25 376,34.4 375.75,34.6 375.5,34.75z"/> <path id="path28" fill="none" stroke="#CCCCCC" stroke-opacity="1" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" d="M440.5,18.3 Q440.5,15 438.1,12.6 C436.55,11.05 434.7,10.3 432.5,10.3 430.25,10.3 428.35,11.05 426.75,12.6 426.15,13.25 425.65,14 425.25,14.8 425.2,11.1 423.85,7.95 421.25,5.35 418.6,2.7 415.35,1.35 411.5,1.35 407.75,1.35 404.55,2.7 401.9,5.35 400.35,6.9 399.3,8.6 398.65,10.45 397.3,9.6 395.75,9.2 394.05,9.2 392.6,9.2 391.25,9.5 390.05,10.15 389.9,7.8 388.95,5.8 387.3,4.1 385.5,2.25 383.3,1.35 380.7,1.35 378.15,1.35 375.9,2.25 374.05,4.1 372.8,5.4 371.95,6.85 371.55,8.5 368.95,6.85 366,6.05 362.7,6.05 358,6.05 353.95,7.7 350.6,11.05 347.25,14.45 345.6,18.5 345.6,23.25 345.6,27.95 347.25,32 350.6,35.45 353.95,38.8 358,40.45 362.7,40.45 366.9,40.45 370.55,39.1 373.7,36.45 372.1,38.4 371.3,40.65 371.3,43.2 371.3,46.1 372.3,48.55 374.35,50.6 376.5,52.7 379,53.75 381.85,53.75 384.75,53.75 387.25,52.7 389.35,50.6 391.4,48.55 392.45,46.1 392.45,43.2 392.45,42.65 392.4,42.2 392.35,41.75 393.3,41.3 394.25,40.7 395.15,40.05 395.7,42.65 397.05,44.95 399.1,47 402,49.9 405.5,51.35 409.55,51.35 413.65,51.35 417.15,49.9 420.05,47 421.05,46.05 421.85,45 422.5,43.85 423.65,44.25 424.85,44.45 426.1,44.45 429.1,44.45 431.65,43.35 433.75,41.2 435.9,39.1 437,36.55 437,33.55 437,30.7 436,28.25 434,26.15 435.55,25.85 436.9,25.1 438.1,23.95 439.7,22.4 440.5,20.55 440.5,18.3z"/> <path id="path30" fill="none" stroke="#CCCCCC" stroke-opacity="1" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" d="M385.45,18.8 L385.35,18.9 385.45,18.9 385.45,18.8z"/> <path id="path35" fill="none" stroke="#CCCCCC" stroke-opacity="1" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" d="M375.5,34.75 C375.75,34.6 376,34.4 376.25,34.25 376.25,34.1 376.2,34.05 376.15,34 375.9,34.2 375.7,34.45 375.5,34.75z"/> </g> </g> </symbol> </defs> ... <use xlink:href="#Symbol__202" id="Symbol.__203" width="94.9" height="52.4" x="0" y="0" transform="matrix(1 0 0 1 813.15 14.5)" overflow="visible"/> and is the same as a girl <use xlink:href="#dziewczynka" id="dziewczynka1" width="80.1" height="187.8" x="-40.05" y="-93.9" transform="matrix(1 0 0 1 50 200)" overflow="visible"/> I tried to remove the dot from ID in the cloud but it didn't change anything. Why the clouds are not visible in the browser?