Extract text position from SVG Image - javascript
A working codepen demo here extracts text from an SVG image and are displayed in the console. May I ask how to extract all the text position? For example, the SVG image is in a border in the demo has width="595.2pt" height="841.92pt" as shown by SVG code. Thus, I guess the position of number 91 would appear somewhere 10% of its overall width and height. May I know the method to extract the position of the number "91"? Any help is very much appreciated and I am very new to this language :)
width="595.2pt" height="841.92pt"
Using the example provided here: https://stackoverflow.com/a/31013492/463319 You can do the following:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="595.2pt" height="841.92pt" viewBox="0 0 595.2 841.92" style="border:1px solid black">
<defs>
<filter x="0" y="0" width="1" height="1" id="solid">
<feFlood flood-color="yellow" result="bg"/>
<feMerge>
<feMergeNode in="bg"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<g enable-background="new">
<g>
<g id="Layer-1" data-name="P">
<clipPath id="cp0">
<path transform="matrix(1,0,0,-1,0,841.92)" d="M .000008869 0 L 595.2 0 L 595.2 841.92 L .000008869 841.92 Z " fill-rule="evenodd"/>
</clipPath>
<g clip-path="url(#cp0)">
<text xml:space="preserve" transform="matrix(1 0 -0 1 0 841.92)" font-size="12" font-family="Calibri"><tspan y="-758.38" x="72.024"> </tspan></text>
</g>
</g>
<g id="Layer-1" data-name="P">
<clipPath id="cp1">
<path transform="matrix(1,0,0,-1,0,841.92)" d="M .000008869 0 L 595.2 0 L 595.2 841.92 L .000008869 841.92 Z " fill-rule="evenodd"/>
</clipPath>
<g clip-path="url(#cp1)">
<text xml:space="preserve" transform="matrix(1 0 -0 1 0 841.92)" font-size="12" font-family="Calibri"><tspan y="-734.62" x="72.024 74.664 77.304 79.944 82.812 85.451999 88.091999 90.731998 93.59999 96.23999 98.87999 101.747989 104.387989 107.027988 109.89598 112.53598 115.17598 117.81598 120.683979 123.323978 125.963977"> </tspan></text>
</g>
<clipPath id="cp2">
<path transform="matrix(1,0,0,-1,0,841.92)" d="M .000008869 0 L 595.2 0 L 595.2 841.92 L .000008869 841.92 Z " fill-rule="evenodd"/>
</clipPath>
<g clip-path="url(#cp2)">
<text xml:space="preserve" transform="matrix(1 0 -0 1 0 841.92)" font-size="12" font-family="Calibri"><tspan y="-734.62" x="128.93 134.93">91</tspan></text>
</g>
<clipPath id="cp3">
<path transform="matrix(1,0,0,-1,0,841.92)" d="M .000008869 0 L 595.2 0 L 595.2 841.92 L .000008869 841.92 Z " fill-rule="evenodd"/>
</clipPath>
<g clip-path="url(#cp3)">
<text xml:space="preserve" transform="matrix(1 0 -0 1 0 841.92)" font-size="12" font-family="Calibri"><tspan y="-734.62" x="141.17"> </tspan></text>
</g>
</g>
<g id="Layer-1" data-name="P">
<clipPath id="cp4">
<path transform="matrix(1,0,0,-1,0,841.92)" d="M .000008869 0 L 595.2 0 L 595.2 841.92 L .000008869 841.92 Z " fill-rule="evenodd"/>
</clipPath>
<g clip-path="url(#cp4)">
<text xml:space="preserve" transform="matrix(1 0 -0 1 0 841.92)" font-size="12" font-family="Calibri"><tspan y="-710.83" x="72.024"> </tspan></text>
</g>
</g>
<g id="Layer-1" data-name="P">
<clipPath id="cp5">
<path transform="matrix(1,0,0,-1,0,841.92)" d="M .000008869 0 L 595.2 0 L 595.2 841.92 L .000008869 841.92 Z " fill-rule="evenodd"/>
</clipPath>
<g clip-path="url(#cp5)">
<text xml:space="preserve" transform="matrix(1 0 -0 1 0 841.92)" font-size="12" font-family="Calibri"><tspan y="-686.83" x="117.17"> </tspan></text>
</g>
</g>
<g id="Layer-1" data-name="P">
<clipPath id="cp6">
<path transform="matrix(1,0,0,-1,0,841.92)" d="M .000008869 0 L 595.2 0 L 595.2 841.92 L .000008869 841.92 Z " fill-rule="evenodd"/>
</clipPath>
<g clip-path="url(#cp6)">
<text xml:space="preserve" transform="matrix(1 0 -0 1 0 841.92)" font-size="12" font-family="Calibri"><tspan y="-663.07" x="117.17 119.81 122.45 125.09 127.95799 130.59799 133.23799 135.87799 138.746 141.386 144.026 146.89402 149.53401 152.17401 155.04203 157.68202 160.32202 162.96202 165.83003 168.47003 171.11003 173.97805 176.61804 179.25804 182.12606 184.76605 187.40605 190.04605 192.91407 195.55406 198.19406 201.06208 203.70207 206.34207 209.21009 211.85009 214.49008 217.13008 219.9981 222.63809 225.27809 228.1461 230.7861 233.4261 236.29412 238.93412 241.57411 244.21411 247.08213 249.72212 252.36212 255.23014 257.87016 260.51017 263.37818 266.0182 268.6582 271.5262 274.16624 276.80625 279.44627 282.31428 284.95429 287.5943 290.4623 293.10234 295.74235 298.61036 301.25038 303.89039 306.5304 309.3984 312.03843 314.67845 317.54646 320.18647 322.82649 325.6945 328.3345 330.97453 333.61454 336.48255 339.12257 341.76258 344.63059 347.2706 349.9106 352.77864 355.41865 358.05867 360.92668 363.56669 366.2067 368.8467 371.71473 374.35475 376.99476 379.63478 382.50279 385.1428 387.7828 390.65083 393.29084 395.93086 398.79887 401.43888 404.0789 406.7189 409.5869 412.22694 414.86695 417.73497 420.37498 423.01499 425.883 428.523 431.16304"> </tspan></text>
</g>
<clipPath id="cp7">
<path transform="matrix(1,0,0,-1,0,841.92)" d="M .000008869 0 L 595.2 0 L 595.2 841.92 L .000008869 841.92 Z " fill-rule="evenodd"/>
</clipPath>
<g clip-path="url(#cp7)">
<text xml:space="preserve" transform="matrix(1 0 -0 1 0 841.92)" font-size="12" font-family="Calibri"><tspan y="-663.07" x="434.57"> </tspan></text>
</g>
</g>
<g id="Layer-1" data-name="P">
<clipPath id="cp8">
<path transform="matrix(1,0,0,-1,0,841.92)" d="M .000008869 0 L 595.2 0 L 595.2 841.92 L .000008869 841.92 Z " fill-rule="evenodd"/>
</clipPath>
<g clip-path="url(#cp8)">
<text xml:space="preserve" transform="matrix(1 0 -0 1 0 841.92)" font-size="11.04" font-family="Calibri"><tspan y="-640.03" x="72.024"> </tspan></text>
</g>
</g>
<g id="Layer-1" data-name="P">
<clipPath id="cp9">
<path transform="matrix(1,0,0,-1,0,841.92)" d="M .000008869 0 L 595.2 0 L 595.2 841.92 L .000008869 841.92 Z " fill-rule="evenodd"/>
</clipPath>
<g clip-path="url(#cp9)">
<text xml:space="preserve" transform="matrix(1 0 -0 1 0 841.92)" font-size="11.04" font-family="Calibri"><tspan y="-617.45" x="72.024"> </tspan></text>
</g>
</g>
<g id="Layer-1" data-name="P">
<clipPath id="cp10">
<path transform="matrix(1,0,0,-1,0,841.92)" d="M .000008869 0 L 595.2 0 L 595.2 841.92 L .000008869 841.92 Z " fill-rule="evenodd"/>
</clipPath>
<g clip-path="url(#cp10)">
<text xml:space="preserve" transform="matrix(1 0 -0 1 0 841.92)" font-size="11.04" font-family="Calibri"><tspan y="-595.13" x="72.024"> </tspan></text>
</g>
</g>
<g id="Layer-1" data-name="P">
<clipPath id="cp11">
<path transform="matrix(1,0,0,-1,0,841.92)" d="M .000008869 0 L 595.2 0 L 595.2 841.92 L .000008869 841.92 Z " fill-rule="evenodd"/>
</clipPath>
<g clip-path="url(#cp11)">
<text xml:space="preserve" transform="matrix(1 0 -0 1 0 841.92)" font-size="11.04" font-family="Calibri"><tspan y="-572.57" x="72.024"> </tspan></text>
</g>
</g>
<g id="Layer-1" data-name="P">
<clipPath id="cp12">
<path transform="matrix(1,0,0,-1,0,841.92)" d="M .000008869 0 L 595.2 0 L 595.2 841.92 L .000008869 841.92 Z " fill-rule="evenodd"/>
</clipPath>
<g clip-path="url(#cp12)">
<text xml:space="preserve" transform="matrix(1 0 -0 1 0 841.92)" font-size="11.04" font-family="Calibri"><tspan y="-550.01" x="72.024"> </tspan></text>
</g>
</g>
<g id="Layer-1" data-name="P">
<clipPath id="cp13">
<path transform="matrix(1,0,0,-1,0,841.92)" d="M .000008869 0 L 595.2 0 L 595.2 841.92 L .000008869 841.92 Z " fill-rule="evenodd"/>
</clipPath>
<g clip-path="url(#cp13)">
<text xml:space="preserve" transform="matrix(1 0 -0 1 0 841.92)" font-size=".96" font-family="Calibri"><tspan y="-537.02" x="72.024 72.26396 72.50392 72.74388 72.98384 73.2238 73.46376 73.70372 73.94368 74.18364 74.4236 74.66356 74.90352 75.14348 75.38344 75.6234 75.86336 76.10332 76.34328 76.58324 76.8232 77.063159 77.303119 77.543079"> </tspan></text>
</g>
<clipPath id="cp14">
<path transform="matrix(1,0,0,-1,0,841.92)" d="M .000008869 0 L 595.2 0 L 595.2 841.92 L .000008869 841.92 Z " fill-rule="evenodd"/>
</clipPath>
<g clip-path="url(#cp14)">
<text xml:space="preserve" transform="matrix(1 0 -0 1 0 841.92)" font-size=".96" font-family="Calibri"><tspan y="-537.02" x="77.784 78.264">32</tspan></text>
</g>
<clipPath id="cp15">
<path transform="matrix(1,0,0,-1,0,841.92)" d="M .000008869 0 L 595.2 0 L 595.2 841.92 L .000008869 841.92 Z " fill-rule="evenodd"/>
</clipPath>
<g clip-path="url(#cp15)">
<text xml:space="preserve" transform="matrix(1 0 -0 1 0 841.92)" font-size=".96" font-family="Calibri"><tspan y="-537.02" x="78.504"> </tspan></text>
</g>
</g>
<g id="Layer-1" data-name="P">
<clipPath id="cp16">
<path transform="matrix(1,0,0,-1,0,841.92)" d="M .000030518 841.92 L 595.2 841.92 L 595.2 .00024414 L .000061035 .00018311 " fill-rule="evenodd"/>
</clipPath>
<g clip-path="url(#cp16)">
<path transform="matrix(1,0,0,-1,0,841.92)" d="M 241.35 623.85 L 273.05003 623.85 L 273.05003 658.44998 L 241.35 658.44998 Z " fill="#ffffff" fill-rule="evenodd"/>
</g>
<clipPath id="cp17">
<path transform="matrix(1,0,0,-1,0,841.92)" d="M .000030518 841.92 L 595.2 841.92 L 595.2 .00024414 L .000061035 .00018311 " fill-rule="evenodd"/>
</clipPath>
<g clip-path="url(#cp17)">
<path transform="matrix(1,0,0,-1,0,841.92)" stroke-width=".75" stroke-linecap="butt" stroke-miterlimit="10" stroke-linejoin="miter" fill="none" stroke="#000000" d="M 241.35 623.85 L 273.05003 623.85 L 273.05003 658.44998 L 241.35 658.44998 Z "/>
</g>
<clipPath id="cp18">
<path transform="matrix(1,0,0,-1,0,841.92)" d="M -.000061035 841.92 L 595.2 841.92 L 595.2 .00018311 L -.000030518 .00012207 " fill-rule="evenodd"/>
</clipPath>
<g clip-path="url(#cp18)">
<mask id="ma19">
<g transform="matrix(0,.36387099,-.36553849,0,269.31,183.82996)">
<use xlink:href="#im20" x="0" y="0" width="93" height="65"/>
</g>
</mask>
<symbol id="im20" viewBox="0 0 93 65">
<image width="93" height="65" xlink:href="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAF0AAABBCAAAAACWDvf/AAAACXBIWXMAAA7EAAAO
xAGVKw4bAAAAL0lEQVR4nO3MMQEAAAwCoNm/9EroBwHILcVut9vtdrvdbrfb7Xa7
3W632+12e90DK6kAQkA/FqEAAAAASUVORK5CYII="/>
</symbol>
<g mask="url(#ma19)">
<g transform="matrix(0,.36387099,-.36553849,0,269.31,183.82996)">
<symbol id="im21" viewBox="0 0 93 65">
<image width="93" height="65" xlink:href="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAF0AAABBCAYAAACzZagjAAAACXBIWXMAAA7EAAAO
xAGVKw4bAAAAnklEQVR4nO3QMQEAIAAEobd/aG3hLRCBs+2Or86kfyc9ID0gPSA9
ID0gPSA9ID0gPSA9ID0gPSA9ID0gPSA9ID0gPSA9ID0gPSA9ID0gPSA9ID0gPSA9
ID0gPSA9ID0gPSA9ID0gPSA9ID0gPSA9ID0gPSA9ID0gPSA9ID0gPSA9ID0gPSA9
ID0gPSA9ID0gPSA9ID0gPSA9ID0gPfAAZ9RBAabDz+QAAAAASUVORK5CYII="/>
</symbol>
<use xlink:href="#im21" x="0" y="0" width="93" height="65"/>
</g>
</g>
</g>
</g>
<g id="Layer-1" data-name="P">
<clipPath id="cp22">
<path transform="matrix(1,0,0,-1,0,841.92)" d="M 245.52 624.24 L 269.52003 624.24 L 269.52003 658.32 L 245.52 658.32 Z " fill-rule="evenodd"/>
</clipPath>
<g clip-path="url(#cp22)">
<text xml:space="preserve" transform="matrix(-.000000044 1 -1 -.000000044 0 841.92)" font-size="12" font-family="Calibri"><tspan y="-257.87998" x="-650.83 -644.83">64</tspan></text>
</g>
</g>
<g id="Layer-1" data-name="P">
<clipPath id="cp23">
<path transform="matrix(1,0,0,-1,0,841.92)" d="M 245.52 624.24 L 269.52003 624.24 L 269.52003 658.32 L 245.52 658.32 Z " fill-rule="evenodd"/>
</clipPath>
<g clip-path="url(#cp23)">
<text xml:space="preserve" transform="matrix(-.000000044 1 -1 -.000000044 0 841.92)" font-size="11.04" font-family="Calibri"><tspan y="-257.87998" x="-638.59"> </tspan></text>
</g>
</g>
<g id="Layer-1" data-name="P">
<path transform="matrix(1,0,0,-1,0,841.92)" d="M 72 662.8 L 106.6 662.8 L 106.6 694.5 L 72 694.5 Z " fill="#ffffff" fill-rule="evenodd"/>
<path transform="matrix(1,0,0,-1,0,841.92)" stroke-width=".75" stroke-linecap="butt" stroke-miterlimit="10" stroke-linejoin="miter" fill="none" stroke="#000000" d="M 72 662.8 L 106.6 662.8 L 106.6 694.5 L 72 694.5 Z "/>
<clipPath id="cp24">
<path transform="matrix(1,0,0,-1,0,841.92)" d="M 0 .000061035 L 595.2 .000061035 L 595.2 841.92007 L 0 841.92007 Z " fill-rule="evenodd"/>
</clipPath>
<g clip-path="url(#cp24)">
<mask id="ma25">
<g transform="matrix(-.3625532,-0,-0,-.36,106.36,174.97997)">
<use xlink:href="#im26" x="0" y="0" width="94" height="66"/>
</g>
</mask>
<symbol id="im26" viewBox="0 0 94 66">
<image width="94" height="66" xlink:href="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAF4AAABCCAAAAAD7rT5SAAAACXBIWXMAAA7EAAAO
xAGVKw4bAAAAL0lEQVR4nO3MMQEAAAwCoNm/9FJ4CQHIVUWv1+v1er1er9fr9Xq9
Xq/X6/V6/Vr/TSgAQxngFtMAAAAASUVORK5CYII="/>
</symbol>
<g mask="url(#ma25)">
<g transform="matrix(-.3625532,-0,-0,-.36,106.36,174.97997)">
<symbol id="im27" viewBox="0 0 94 66">
<image width="94" height="66" xlink:href="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAF4AAABCCAYAAADexmGOAAAACXBIWXMAAA7EAAAO
xAGVKw4bAAAAn0lEQVR4nO3QMQEAIAAEobd/aG3hLRCBs+2O787EJ8RHxEfER8RH
xEfER8RHxEfER8RHxEfER8RHxEfER8RHxEfER8RHxEfER8RHxEfER8RHxEfER8RH
xEfER8RHxEfER8RHxEfER8RHxEfER8RHxEfER8RHxEfER8RHxEfER8RHxEfER8RH
xEfER8RHxEfER8RHxEfER8RHxEfER8RHHiQCQgFMbYNfAAAAAElFTkSuQmCC"/>
</symbol>
<use xlink:href="#im27" x="0" y="0" width="94" height="66"/>
</g>
</g>
</g>
</g>
<g id="Layer-1" data-name="P">
<clipPath id="cp28">
<path transform="matrix(1,0,0,-1,0,841.92)" d="M 72.24 666.72 L 106.56 666.72 L 106.56 690.72 L 72.24 690.72 Z " fill-rule="evenodd"/>
</clipPath>
<g clip-path="url(#cp28)">
<text xml:space="preserve" transform="matrix(-1 -.000000087 .000000087 -1 0 841.92)" font-size="12" font-family="Calibri" filter="url(#solid)"><tspan y="678.41" x="-99.19194 -93.19194">39</tspan></text>
</g>
</g>
<g id="Layer-1" data-name="P">
<clipPath id="cp29">
<path transform="matrix(1,0,0,-1,0,841.92)" d="M 72.24 666.72 L 106.56 666.72 L 106.56 690.72 L 72.24 690.72 Z " fill-rule="evenodd"/>
</clipPath>
<g clip-path="url(#cp29)">
<text xml:space="preserve" transform="matrix(-1 -.000000087 .000000087 -1 0 841.92)" font-size="11.04" font-family="Calibri"><tspan y="678.41" x="-86.95194"> </tspan></text>
</g>
</g>
</g>
</g>
</svg>
You can optimize and prettify your code here: https://www.svgviewer.dev/
Related
Javascript to perform custom placement of svg text
I am working with a SVG element as following. In this I am using <textPath></textPath> to place a text on a path.
The svg is following
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
<rect class="vBoxRect" width="1280" height="720" fill="green" rx="35" style="overflow: visible;"></rect>
<rect class="boundRect" x="70" y="70" width="1090" height="500" fill="green"></rect>
<g class="bound" style="transform: translate(70px, 70px);">
<path id="WorldAvg" class="WorldAvg" fill="none" stroke="white" stroke-width="5" opacity="1" d="M0,418.8448266855795L45.416666666666664,414.575606092466L90.83333333333333,411.52106545918446L136.25,407.6362492744353L181.66666666666666,404.77160362539087L227.08333333333334,393.4071256244998L272.5,391.02044947895274L317.9166666666667,386.66829128561017L363.3333333333333,379.8367479839252L408.75,378.1893224105598L454.1666666666667,369.95354728799214L499.5833333333333,368.77725419172447L545,363.8472517451793L590.4166666666666,363.6062134379884L635.8333333333334,357.4943259634553L681.25,351.27652154825586L726.6666666666666,344.34458188257486L772.0833333333334,342.18836536625594L817.5,338.5473949587725L862.9166666666666,336.1670218633692L908.3333333333334,332.6090887556393L953.75,328.1112436453848L999.1666666666666,321.4448005003716L1044.5833333333335,312.9573561957251L1090,306.4131526885112"></path>
<g class="avgLbl">
<text text-anchor="start" stroke="red">
<textPath href="#WorldAvg" startOffset="0%">10.3%</textPath>
</text>
<text text-anchor="end" stroke="red">
<textPath href="#WorldAvg" startOffset="100%">24.7%</textPath>
</text>
</g>
</svg>
</body>
</html>
My end goal is to place each text just above the path so that the text is clearly visible.
To achieve that, I tried the following which did not work. the label for 24.7% is pushed far down.
Is there a way to programatically achieve this?
const element = document.querySelectorAll('.avgLbl>text');
const comp = document.querySelector(`.bound>#WorldAvg`);
element.forEach(
(a, i) => {
const diff = comp.getBoundingClientRect().bottom - a.getBoundingClientRect().bottom;
a.setAttribute('transform', `translate(0,${diff})`)
}
);
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
<rect class="vBoxRect" width="1280" height="720" fill="green" rx="35" style="overflow: visible;"></rect>
<rect class="boundRect" x="70" y="70" width="1090" height="500" fill="green"></rect>
<g class="bound" style="transform: translate(70px, 70px);">
<path id="WorldAvg" class="WorldAvg" fill="none" stroke="white" stroke-width="5" opacity="1" d="M0,418.8448266855795L45.416666666666664,414.575606092466L90.83333333333333,411.52106545918446L136.25,407.6362492744353L181.66666666666666,404.77160362539087L227.08333333333334,393.4071256244998L272.5,391.02044947895274L317.9166666666667,386.66829128561017L363.3333333333333,379.8367479839252L408.75,378.1893224105598L454.1666666666667,369.95354728799214L499.5833333333333,368.77725419172447L545,363.8472517451793L590.4166666666666,363.6062134379884L635.8333333333334,357.4943259634553L681.25,351.27652154825586L726.6666666666666,344.34458188257486L772.0833333333334,342.18836536625594L817.5,338.5473949587725L862.9166666666666,336.1670218633692L908.3333333333334,332.6090887556393L953.75,328.1112436453848L999.1666666666666,321.4448005003716L1044.5833333333335,312.9573561957251L1090,306.4131526885112"></path>
<g class="avgLbl">
<text text-anchor="start" stroke="red">
<textPath href="#WorldAvg" startOffset="0%">10.3%</textPath>
</text>
<text text-anchor="end" stroke="red">
<textPath href="#WorldAvg" startOffset="100%">24.7%</textPath>
</text>
</g>
</svg>
</body>
</html>
You could achieve a baseline offset by adjusting dominant-baseline and dy values like so:
svg {
display: block;
height: 100vmin;
}
text {
font-size: 30px
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
<rect class="vBoxRect" width="1280" height="720" fill="green" rx="35" style="overflow: visible;"></rect>
<rect class="boundRect" x="70" y="70" width="1090" height="500" fill="green"></rect>
<g class="bound" style="transform: translate(70px, 70px);">
<path id="WorldAvg" class="WorldAvg" fill="none" stroke="white" stroke-width="5" opacity="1" d="M 0 418.8 L 45.4 414.6 L 90.8 411.5 L 136.3 407.6 L 181.7 404.8 L 227.1 393.4 L 272.5 391 L 317.9 386.7 L 363.3 379.8 L 408.8 378.2 L 454.2 370 L 499.6 368.8 L 545 363.8 L 590.4 363.6 L 635.8 357.5 L 681.3 351.3 L 726.7 344.3 L 772.1 342.2 L 817.5 338.5 L 862.9 336.2 L 908.3 332.6 L 953.8 328.1 L 999.2 321.4 L 1044.6 313 L 1090 306.4"></path>
<g class="avgLbl">
<text text-anchor="start" dominant-baseline="hanging" dy="10" stroke="red">
<textPath href="#WorldAvg" startOffset="0%">10.3%</textPath>
</text>
<text text-anchor="end" dominant-baseline="hanging" dy="10" stroke="red">
<textPath href="#WorldAvg" startOffset="100%">24.7%</textPath>
</text>
</g>
</svg>
dominant-baseline="hanging"
will position your text under your <textPath>
dy="10"
allows you to finetune the vertical alignment further:
Quite often capital letters ascenders will collide with your <textPath>.
Animation of cutting boards with a circular saw
I found a topic that implements an animation of the rotation and movement of the circular saw
html {
background-color: #337ab7;
}
.cutline {
stroke: #222;
stroke-width: .1%;
stroke-width: .5%;
stroke-dasharray: 1% 2%;
stroke-linecap: round;
fill: none;
}
.sawblade {
fill: #eee;
width: 200px;
height: auto;
margin: 30px;
}
<svg viewBox="0 0 3387 1270">
<path id="cutline" class="cutline" d="M 2700 1000 L 100 1000 " />
<g class="sawblade" >
<path id="sawblade" d="M779.9,413.8s15.26,-47.61,-89.24,-73.22c-1.24,-0.3,-2.45,-0.58,-3.65,-0.84c20.57,-19,50.83,-37.45,85.5,-28.49c0,0,2.29,-50,-105.27,-47.38c-1.2,0,-2.36,0.08,-3.51,0.13c14.95,-23.6,39.28,-49.18,74.95,-49.6c0,0,-10.8,-48.82,-114,-18.32l-1.63,0.49c8.62,-26.2,25.66,-55.9,59.27,-65.14c0,0,-22.88,-44.46,-114.87,11.33c-1.1,0.66,-2.15,1.32,-3.18,2c1.12,-28,9.45,-62.41,40.3,-80.6c0,0,-33.69,-36.94,-107.93,40.94c-0.82,0.87,-1.62,1.72,-2.39,2.57c-6.15,-27.25,-7,-62.55,18,-88.07c0,0,-42.16,-26.89,-93.55,67.63c-0.27,0.51,-0.53,1,-0.8,1.5c-12.43,-24.62,-21.38,-57.66,-4.15,-88c0,0,-47.61,-15.25,-73.22,89.24c-0.3,1.24,-0.58,2.46,-0.84,3.65c-19,-20.57,-37.45,-50.82,-28.49,-85.49c0,0,-50,-2.3,-47.38,105.26c0,1.2,0.08,2.37,0.13,3.52c-23.62,-14.93,-49.18,-39.29,-49.56,-75c0,0,-48.82,10.79,-18.32,114c0.16,0.55,0.32,1.09,0.49,1.62c-26.2,-8.61,-55.9,-25.66,-65.14,-59.27c0,0,-44.46,22.88,11.33,114.88q1,1.64,2,3.18c-28,-1.12,-62.42,-9.46,-80.6,-40.31c0,0,-36.94,33.7,40.94,107.93c0.86,0.83,1.72,1.62,2.57,2.4c-27.25,6.15,-62.55,7,-88.07,-18c0,0,-26.89,42.15,67.63,93.54l1.5,0.8c-24.62,12.44,-57.66,21.38,-88,4.15c0,0,-15.26,47.62,89.24,73.22c1.24,0.31,2.46,0.58,3.65,0.85c-20.57,19,-50.82,37.44,-85.49,28.49c0,0,-2.3,49.94,105.26,47.37c1.2,0,2.37,-0.07,3.52,-0.13c-14.93,23.63,-39.29,49.19,-75,49.57c0,0,10.79,48.82,114,18.32l1.62,-0.5c-8.61,26.21,-25.66,55.9,-59.27,65.14c0,0,22.88,44.46,114.88,-11.32c1.09,-0.67,2.15,-1.33,3.18,-2c-1.12,28,-9.46,62.42,-40.31,80.6c0,0,33.7,36.94,107.93,-40.93c0.83,-0.87,1.62,-1.73,2.4,-2.58c6.15,27.26,7,62.56,-18,88.07c0,0,42.15,26.89,93.54,-67.63c0.28,-0.51,0.54,-1,0.8,-1.5c12.44,24.62,21.38,57.67,4.15,88c0,0,47.62,15.26,73.22,-89.24c0.31,-1.24,0.58,-2.45,0.85,-3.65c19,20.57,37.44,50.83,28.49,85.5c0,0,49.94,2.29,47.37,-105.27c0,-1.2,-0.07,-2.36,-0.13,-3.51c23.63,14.92,49.18,39.28,49.57,75c0,0,48.82,-10.8,18.32,-114c-0.16,-0.55,-0.33,-1.09,-0.5,-1.63c26.21,8.62,55.9,25.66,65.14,59.27c0,0,44.46,-22.88,-11.32,-114.87c-0.67,-1.1,-1.33,-2.15,-2,-3.18c28,1.12,62.42,9.46,80.6,40.31c0,0,36.94,-33.7,-40.93,-107.94c-0.87,-0.82,-1.73,-1.62,-2.58,-2.39c27.26,-6.15,62.56,-7,88.07,18c0,0,26.89,-42.16,-67.63,-93.55l-1.5,-0.8c24.69,-12.4,57.74,-21.35,88.04,-4.12zm-442.7,-23.46a53.14,53.14,0,1,1,53.14,53.14a53.15,53.15,0,0,1,-53.14,-53.14z" >
<animateTransform attributeType="xml" attributeName="transform" type="rotate" values="360 390.35 390.35; 0 390.35 390.35" dur="5s" repeatCount="indefinite"></animateTransform>
<animateMotion dur="5s" repeatCount="indefinite" rotate="auto" >
<mpath xlink:href="#cutline" />
</animateMotion>
</path>
</g>
</svg>
In this matter, the problem of simultaneous double animation was solved: rotation and movement of a circular saw.
There was an idea to apply this solution on a realistic example, for example cutting a board
But it turned out to be not so simple.
Either the board obscured the saw, or the saw was in the foreground, blocking the board.
It is necessary that the saw cut into the board, the cut line was visible, and after passing the saw, two halves of the board would be obtained.
I tried all sorts of solutions using clip-path, mask, etc., to hide unnecessary parts of the image.
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 3387 1270" version="1.1">
<defs>
<mask id="msk1" >
<rect width="100%" height="100%" fill="white" />
<circle cx="390" cy="390" r="390" fill="red" />
</mask>
</defs>
<g id="sawblade" transform="translate(1000,126)">
<path d="m779.9 413.8c0 0 15.3-47.6-89.2-73.2-1.2-0.3-2.4-0.6-3.6-0.8 20.6-19 50.8-37.4 85.5-28.5 0 0 2.3-50-105.3-47.4-1.2 0-2.4 0.1-3.5 0.1 15-23.6 39.3-49.2 75-49.6 0 0-10.8-48.8-114-18.3l-1.6 0.5c8.6-26.2 25.7-55.9 59.3-65.1 0 0-22.9-44.5-114.9 11.3-1.1 0.7-2.1 1.3-3.2 2 1.1-28 9.5-62.4 40.3-80.6 0 0-33.7-36.9-107.9 40.9-0.8 0.9-1.6 1.7-2.4 2.6-6.1-27.2-7-62.5 18-88.1 0 0-42.2-26.9-93.5 67.6-0.3 0.5-0.5 1-0.8 1.5-12.4-24.6-21.4-57.7-4.1-88 0 0-47.6-15.2-73.2 89.2-0.3 1.2-0.6 2.5-0.8 3.7-19-20.6-37.4-50.8-28.5-85.5 0 0-50-2.3-47.4 105.3 0 1.2 0.1 2.4 0.1 3.5-23.6-14.9-49.2-39.3-49.6-75 0 0-48.8 10.8-18.3 114 0.2 0.6 0.3 1.1 0.5 1.6-26.2-8.6-55.9-25.7-65.1-59.3 0 0-44.5 22.9 11.3 114.9q1 1.6 2 3.2c-28-1.1-62.4-9.5-80.6-40.3 0 0-36.9 33.7 40.9 107.9 0.9 0.8 1.7 1.6 2.6 2.4-27.2 6.2-62.5 7-88.1-18 0 0-26.9 42.2 67.6 93.5l1.5 0.8c-24.6 12.4-57.7 21.4-88 4.2 0 0-15.3 47.6 89.2 73.2 1.2 0.3 2.5 0.6 3.7 0.9-20.6 19-50.8 37.4-85.5 28.5 0 0-2.3 49.9 105.3 47.4 1.2 0 2.4-0.1 3.5-0.1-14.9 23.6-39.3 49.2-75 49.6 0 0 10.8 48.8 114 18.3l1.6-0.5c-8.6 26.2-25.7 55.9-59.3 65.1 0 0 22.9 44.5 114.9-11.3 1.1-0.7 2.2-1.3 3.2-2-1.1 28-9.5 62.4-40.3 80.6 0 0 33.7 36.9 107.9-40.9 0.8-0.9 1.6-1.7 2.4-2.6 6.2 27.3 7 62.6-18 88.1 0 0 42.2 26.9 93.5-67.6 0.3-0.5 0.5-1 0.8-1.5 12.4 24.6 21.4 57.7 4.2 88 0 0 47.6 15.3 73.2-89.2 0.3-1.2 0.6-2.4 0.9-3.6 19 20.6 37.4 50.8 28.5 85.5 0 0 49.9 2.3 47.4-105.3 0-1.2-0.1-2.4-0.1-3.5 23.6 14.9 49.2 39.3 49.6 75 0 0 48.8-10.8 18.3-114-0.2-0.5-0.3-1.1-0.5-1.6 26.2 8.6 55.9 25.7 65.1 59.3 0 0 44.5-22.9-11.3-114.9-0.7-1.1-1.3-2.1-2-3.2 28 1.1 62.4 9.5 80.6 40.3 0 0 36.9-33.7-40.9-107.9-0.9-0.8-1.7-1.6-2.6-2.4 27.3-6.1 62.6-7 88.1 18 0 0 26.9-42.2-67.6-93.5l-1.5-0.8c24.7-12.4 57.7-21.3 88-4.1zM337.2 390.3a53.1 53.1 0 1 1 53.1 53.1 53.2 53.2 0 0 1-53.1-53.1z">
<animateTransform attributeType="xml" attributeName="transform" type="rotate" values="0 390.35 390.35; 360 390.35 390.35" dur="5s" repeatCount="indefinite"></animateTransform>
</path>
</g>
<g mask="url(#msk1)">
<path d="M514.5 288.7H3267.7L3035.1 698.6H281.6Z" style="fill:#e4c000;stroke-width:2;stroke:#500"/>
<path d="m3267.7 288.7 3.3 67.7-236 404.4H281.6v-62.1h2753.5z" style="fill:#e4c000;stroke-width:2;stroke:#000"/>
<path d="m3035.1 698.6 0 62.1" style="fill:none;stroke:#000"/>
<animateTransform attributeType="xml" attributeName="transform" type="translate" values="-1600, 0;1700, 0" dur="5s" repeatCount="1" fill="freeze"></animateTransform>
</g>
</svg>
How to get a solution so that when cutting the board, the saw is in the body of the board
It is necessary to encode two halves of the board and place one in front of the saw, and place the second half of the board behind the saw. Thus, it turns out that the saw crashes into the board. When moving the saw, a cut line stretches behind it, which is realized by an animation of increasing the line <line x1="820" y1="580" x2="820" y2="580" stroke="black" stroke-width="16" > <!-- Cut line animation --> <animate id="cut_line" attributeName="x2" begin="svg1.click" dur="10s" values="828;3550" /> Thanks to #enxaneta for the idea of using different types of animation animateTransform and animateMotion since two animations of animateTransform applied to the same object do not work <!-- Saw rotation animation --> <animateTransform attributeType="xml" attributeName="transform" type="rotate" values="0 390.35 390.35; 360 390.35 390.35" dur="2.5s" begin="svg1.click" repeatCount="indefinite" additive="sum" /> <!-- Saw Movement Animation --> <animateMotion dur="15s" begin="svg1.click" repeatCount="1" fill="freeze"> <mpath xlink:href="#cut" /> </animateMotion> Please consider comments in the code <svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 3387 1270" version="1.1"> <!-- Half of the board in the background located behind the saw --> <g id="g906" transform="translate(400,126)"> <path id="path846" d="M 514.46257,288.68093 H 3267.7437 l -111.1614,192.53728 -2748.7345,0 z" style="fill:#e4c000;stroke:black;stroke-width:4" /> <path id="path900" d="M 403.30112,481.21821 H 3156.5823 l 111.1614,-192.53728 3.3199,85.72051 -106.2504,184.03106 -2756.9654,0.25024 z" style="fill:#e4c000;stroke:#000000;stroke-width:4;" /> <!-- Board fall animation after cutting --> <animateTransform id="an_fell2" attributeType="xml" attributeName="transform" type="translate" values="0 0; 0 350" begin="an_fell.begin + 0.8s " dur="1s" repeatCount="1" fill="freeze" additive="sum" /> </g> <g transform="translate(50,126)" id="g4"> <path id="sawblade" d="m 779.9,413.8 c 0,0 15.26,-47.61 -89.24,-73.22 -1.24,-0.3 -2.45,-0.58 -3.65,-0.84 20.57,-19 50.83,-37.45 85.5,-28.49 0,0 2.29,-50 -105.27,-47.38 -1.2,0 -2.36,0.08 -3.51,0.13 14.95,-23.6 39.28,-49.18 74.95,-49.6 0,0 -10.8,-48.82 -114,-18.32 l -1.63,0.49 c 8.62,-26.2 25.66,-55.9 59.27,-65.14 0,0 -22.88,-44.46 -114.87,11.33 -1.1,0.66 -2.15,1.32 -3.18,2 1.12,-28 9.45,-62.41 40.3,-80.6 0,0 -33.69,-36.94 -107.93,40.94 -0.82,0.87 -1.62,1.72 -2.39,2.57 -6.15,-27.25 -7,-62.55 18,-88.07 0,0 -42.16,-26.89 -93.55,67.63 -0.27,0.51 -0.53,1 -0.8,1.5 -12.43,-24.62 -21.38,-57.66 -4.15,-88 0,0 -47.61,-15.25 -73.22,89.24 -0.3,1.24 -0.58,2.46 -0.84,3.65 -19,-20.57 -37.45,-50.82 -28.49,-85.49 0,0 -50,-2.3 -47.38,105.26 0,1.2 0.08,2.37 0.13,3.52 -23.62,-14.93 -49.18,-39.29 -49.56,-75 0,0 -48.82,10.79 -18.32,114 0.16,0.55 0.32,1.09 0.49,1.62 -26.2,-8.61 -55.9,-25.66 -65.14,-59.27 0,0 -44.46,22.88 11.33,114.88 q 1,1.64 2,3.18 c -28,-1.12 -62.42,-9.46 -80.6,-40.31 0,0 -36.94,33.7 40.94,107.93 0.86,0.83 1.72,1.62 2.57,2.4 -27.25,6.15 -62.55,7 -88.07,-18 0,0 -26.89,42.15 67.63,93.54 l 1.5,0.8 c -24.62,12.44 -57.66,21.38 -88,4.15 0,0 -15.26,47.62 89.24,73.22 1.24,0.31 2.46,0.58 3.65,0.85 -20.57,19 -50.82,37.44 -85.49,28.49 0,0 -2.3,49.94 105.26,47.37 1.2,0 2.37,-0.07 3.52,-0.13 -14.93,23.63 -39.29,49.19 -75,49.57 0,0 10.79,48.82 114,18.32 l 1.62,-0.5 c -8.61,26.21 -25.66,55.9 -59.27,65.14 0,0 22.88,44.46 114.88,-11.32 1.09,-0.67 2.15,-1.33 3.18,-2 -1.12,28 -9.46,62.42 -40.31,80.6 0,0 33.7,36.94 107.93,-40.93 0.83,-0.87 1.62,-1.73 2.4,-2.58 6.15,27.26 7,62.56 -18,88.07 0,0 42.15,26.89 93.54,-67.63 0.28,-0.51 0.54,-1 0.8,-1.5 12.44,24.62 21.38,57.67 4.15,88 0,0 47.62,15.26 73.22,-89.24 0.31,-1.24 0.58,-2.45 0.85,-3.65 19,20.57 37.44,50.83 28.49,85.5 0,0 49.94,2.29 47.37,-105.27 0,-1.2 -0.07,-2.36 -0.13,-3.51 23.63,14.92 49.18,39.28 49.57,75 0,0 48.82,-10.8 18.32,-114 -0.16,-0.55 -0.33,-1.09 -0.5,-1.63 26.21,8.62 55.9,25.66 65.14,59.27 0,0 44.46,-22.88 -11.32,-114.87 -0.67,-1.1 -1.33,-2.15 -2,-3.18 28,1.12 62.42,9.46 80.6,40.31 0,0 36.94,-33.7 -40.93,-107.94 -0.87,-0.82 -1.73,-1.62 -2.58,-2.39 27.26,-6.15 62.56,-7 88.07,18 0,0 26.89,-42.16 -67.63,-93.55 l -1.5,-0.8 c 24.69,-12.4 57.74,-21.35 88.04,-4.12 z M 337.2,390.34 a 53.14,53.14 0 1 1 53.14,53.14 53.15,53.15 0 0 1 -53.14,-53.14 z"> <!-- Saw rotation animation --> <animateTransform attributeType="xml" attributeName="transform" type="rotate" values="0 390.35 390.35; 360 390.35 390.35" dur="2.5s" begin="svg1.click" repeatCount="indefinite" additive="sum" /> <!-- Saw Movement Animation --> <animateMotion dur="15s" begin="svg1.click" repeatCount="1" fill="freeze"> <mpath xlink:href="#cut" /> </animateMotion> </path> </g> <!-- Half of the board in the foreground located before the saw --> <g id="g907" transform="translate(303,300)"> <path id="path846" d="M 514.46257,288.68093 H 3267.7437 l -111.1614,192.53728 -2748.7345,0 z" style="fill:#e4c000;stroke:black;stroke-width:4;" /> <path id="path900" d="M 403.30112,481.21821 H 3156.5823 l 111.1614,-192.53728 3.3199,85.72051 -106.2504,184.03106 -2756.9654,0.25024 z" style="fill:#e4c000;stroke:#000000;stroke-width:4;" /> <!-- Board fall animation after cutting --> <animateTransform id="an_fell" attributeType="xml" attributeName="transform" type="translate" values="0 0; 120 400" begin="cut_line.end" dur="1s" repeatCount="1" fill="freeze" additive="sum" /> </g> <!-- Mask line cuting --> <path id="path914" transform="translate(410,108)" style="fill:none;stroke:#E4C000;stroke-width:12px;" d="M 403.30112,481.21821 H 3156.5823" > <animate id="opacity_line2" attributeName="stroke-opacity" begin="an_fell.begin" dur="0.1s" values="1;0" fill="freeze" /> </path> <path id="cut" fill="red" d="M10 126 L3500 126"/> <line x1="820" y1="580" x2="820" y2="580" stroke="black" stroke-width="12" > <!-- Board cut animation --> <animate id="cut_line" attributeName="x2" begin="svg1.click" dur="15s" values="828;3550" /> <!-- Masking of the line animation of the cutting --> <animate id="opacity_line" attributeName="stroke-opacity" begin="an_fell.begin" dur="0.1s" values="1;0" fill="freeze" /> </line> </svg>
Quick example You need to have 3 layers. As SVG gives no support for depth apart from element order (or maybe a filter can create a z buffer) you need the elements in the correct order. I don't have a SVG authoring tool on hand so used some code to slice the plank. The plank is duplicated, one behind and one in front of the saw. As a used code you will find some additional element ids in the example I forgot to remove. They are not needed. To hide the cut to the left of the blade you need to cover the cut. I did this using a clip-path for the left and right sides. To avoid holes between clip paths you need to overlap them by at least a pixel. Example The right cut plank is a little thicker than it should be (my bad) but then this is how to solve the problem, not the complete end product. I also removed the mask, you will have to add that as well (one for the top and one for the bottom. As stackOverflow does not count SVG as an image i can not insert the example without putting it in a snippet. <svg id="SVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 3387 1270" version="1.1"> <defs> <clipPath id="clipLeft"> <rect x="-100" y="0" width="1102" height="100%"/> </clipPath> <clipPath id="clipRight"> <rect x="1000" y="0" width="2100" height="100%"/> </clipPath> </defs> <!-- RIGHT SIDE of ANIMATION --> <g clip-path="url(#clipRight)"> <!-- BACK of ANIMATION --> <g transform="translate(1700 0)"> <path id="boardTop" d="M 514.5 288.1 H 3267.7 L 3151.4 493.4 H 398.2Z" style="fill:#e4c000;stroke-width:2;stroke:#500"></path> <path id="boardTopEdge" d="M 3267.7 288.1 L 3267.7 355.8 L 3151.4 561.1 L 3151.4 493.4z" style="fill:#e4c000;stroke-width:2;stroke:#000"></path> <path id="boardTopEdge3" d="M 3151.4 493.4 L 3151.4 561.1 L 398.2 561.1 L 398.2 493.4z" style="fill:#e4c000;stroke-width:2;stroke:#000"></path> <path id="boardTopEdge1" d="M 3267.7 288.1 L 3267.7 355.8 L 3151.4 561.1 L 3151.4 493.4z" style="fill:none;stroke:#000"></path> <path id="boardTopEdge2" d="M 3151.4 493.4 L 3151.4 561.1 L 398.2 561.1 L 398.2 493.4z" style="fill:none;stroke:#000"></path> <animateTransform attributeType="xml" attributeName="transform" type="translate" values="-1600, 0;1700, 0" dur="5s" repeatCount="1" fill="freeze"> </animateTransform> </g> <g id="sawblade" transform="translate(1000,126)"> <path d="m779.9 413.8c0 0 15.3-47.6-89.2-73.2-1.2-0.3-2.4-0.6-3.6-0.8 20.6-19 50.8-37.4 85.5-28.5 0 0 2.3-50-105.3-47.4-1.2 0-2.4 0.1-3.5 0.1 15-23.6 39.3-49.2 75-49.6 0 0-10.8-48.8-114-18.3l-1.6 0.5c8.6-26.2 25.7-55.9 59.3-65.1 0 0-22.9-44.5-114.9 11.3-1.1 0.7-2.1 1.3-3.2 2 1.1-28 9.5-62.4 40.3-80.6 0 0-33.7-36.9-107.9 40.9-0.8 0.9-1.6 1.7-2.4 2.6-6.1-27.2-7-62.5 18-88.1 0 0-42.2-26.9-93.5 67.6-0.3 0.5-0.5 1-0.8 1.5-12.4-24.6-21.4-57.7-4.1-88 0 0-47.6-15.2-73.2 89.2-0.3 1.2-0.6 2.5-0.8 3.7-19-20.6-37.4-50.8-28.5-85.5 0 0-50-2.3-47.4 105.3 0 1.2 0.1 2.4 0.1 3.5-23.6-14.9-49.2-39.3-49.6-75 0 0-48.8 10.8-18.3 114 0.2 0.6 0.3 1.1 0.5 1.6-26.2-8.6-55.9-25.7-65.1-59.3 0 0-44.5 22.9 11.3 114.9q1 1.6 2 3.2c-28-1.1-62.4-9.5-80.6-40.3 0 0-36.9 33.7 40.9 107.9 0.9 0.8 1.7 1.6 2.6 2.4-27.2 6.2-62.5 7-88.1-18 0 0-26.9 42.2 67.6 93.5l1.5 0.8c-24.6 12.4-57.7 21.4-88 4.2 0 0-15.3 47.6 89.2 73.2 1.2 0.3 2.5 0.6 3.7 0.9-20.6 19-50.8 37.4-85.5 28.5 0 0-2.3 49.9 105.3 47.4 1.2 0 2.4-0.1 3.5-0.1-14.9 23.6-39.3 49.2-75 49.6 0 0 10.8 48.8 114 18.3l1.6-0.5c-8.6 26.2-25.7 55.9-59.3 65.1 0 0 22.9 44.5 114.9-11.3 1.1-0.7 2.2-1.3 3.2-2-1.1 28-9.5 62.4-40.3 80.6 0 0 33.7 36.9 107.9-40.9 0.8-0.9 1.6-1.7 2.4-2.6 6.2 27.3 7 62.6-18 88.1 0 0 42.2 26.9 93.5-67.6 0.3-0.5 0.5-1 0.8-1.5 12.4 24.6 21.4 57.7 4.2 88 0 0 47.6 15.3 73.2-89.2 0.3-1.2 0.6-2.4 0.9-3.6 19 20.6 37.4 50.8 28.5 85.5 0 0 49.9 2.3 47.4-105.3 0-1.2-0.1-2.4-0.1-3.5 23.6 14.9 49.2 39.3 49.6 75 0 0 48.8-10.8 18.3-114-0.2-0.5-0.3-1.1-0.5-1.6 26.2 8.6 55.9 25.7 65.1 59.3 0 0 44.5-22.9-11.3-114.9-0.7-1.1-1.3-2.1-2-3.2 28 1.1 62.4 9.5 80.6 40.3 0 0 36.9-33.7-40.9-107.9-0.9-0.8-1.7-1.6-2.6-2.4 27.3-6.1 62.6-7 88.1 18 0 0 26.9-42.2-67.6-93.5l-1.5-0.8c24.7-12.4 57.7-21.3 88-4.1zM337.2 390.3a53.1 53.1 0 1 1 53.1 53.1 53.2 53.2 0 0 1-53.1-53.1z" transform="rotate(303.501 390.35 390.35)"> <animateTransform attributeType="xml" attributeName="transform" type="rotate" values="0 390.35 390.35; 360 390.35 390.35" dur="2.5s" repeatCount="indefinite"></animateTransform> </path> </g> <!-- FRONT of ANIMATION --> <g transform="translate(1700 0)"> <path id="boardBotEdge" d="M 3128.1 534.4 L 3128.1 602.1 L 3035.1 766.3 L 3035.1 698.6z" style="fill:#e4c000;stroke-width:2;stroke:#000"></path> <path id="boardBot" d="M 374.9 534.4 H 3128.1 L 3035.1 698.6 H 281.6Z" style="fill:#e4c000;stroke-width:2;stroke:#500"></path> <path id="boardBotEdge3" d="M 3035.1 698.6 L 3035.1 766.3 L 281.6 766.3 L 281.6 698.6z" style="fill:#e4c000;stroke-width:2;stroke:#500"></path> <path id="boardBotEdge1" d="M 3128.1 534.4 L 3128.1 602.1 L 3035.1 766.3 L 3035.1 698.6z" style="fill:none;stroke:#000"></path> <path id="boardBotEdge2" d="M 3035.1 698.6 L 3035.1 766.3 L 281.6 766.3 L 281.6 698.6z" style="fill:none;stroke:#000"></path> <animateTransform attributeType="xml" attributeName="transform" type="translate" values="-1600, 0;1700, 0" dur="5s" repeatCount="1" fill="freeze"> </animateTransform> </g> <g> <rect width="0" height="200" y="450" x="800" style="fill:#e4c000;"> <animate attributeName="width" values="1750;0" dur="3s" repeatCount="1"></animate> <animate attributeName="x" values="-850;800" dur="3s" repeatCount="1"></animate> </rect> </g> </g> <!-- LEFT SIDE of ANIMATION --> <g clip-path="url(#clipLeft)"> <g> <path d="M514.5 288.7H3267.7L3035.1 698.6H281.6Z" style="fill:#e4c000;stroke-width:2;stroke:#500"/> <path d="m3267.7 288.7 3.3 67.7-236 404.4H281.6v-62.1h2753.5z" style="fill:#e4c000;stroke-width:2;stroke:#000"/> <path d="m3035.1 698.6 0 62.1" style="fill:none;stroke:#000"/> <animateTransform attributeType="xml" attributeName="transform" type="translate" values="-1600, 0;1700, 0" dur="5s" repeatCount="1" fill="freeze"></animateTransform> </g> </g> </svg>
Extracting a word from a string starting with a particular word till the end
I need to extract a particular attribute from an HTML element. This is an SVG element and it has clip-path as an attribute. I need to replace the clip-path that comes with the html with my custom clip-path. How can i do that. My outer HTML looks like this: <div> <svg xmlns="http://www.w3.org/2000/svg" border="0" width="1303" height="347" role="presentation" style="display: block;"> <clipPath clip-rule="nonzero" id="ac_clip_1"> <path data-ac-wrapper-id="26" fill="none" stroke="black" d="M 96 10 L 1283 10 1283 295 96 295 96 10 Z"></path> </clipPath> <clipPath clip-rule="nonzero" id="ac_clip_2"> <path data-ac-wrapper-id="28" fill="none" stroke="black" d="M 96 10 L 1283 10 1283 295 96 295 96 10 Z"></path> </clipPath> <clipPath clip-rule="nonzero" id="ac_clip_3"> <path data-ac-wrapper-id="30" fill="none" stroke="black" d="M 96 10 L 1283 10 1283 295 96 295 96 10 Z"></path> </clipPath> <g data-ac-wrapper-id="23"> <path data-ac-wrapper-id="24" fill="transparent" stroke="none" d="M 0 0 L 1303 0 1303 0 1303 347 1303 347 0 347 0 347 0 0 0 0 Z"> </path> </g> <path id="68" clip-path="url(file:///C:/Users/user1/Desktop/svg.html#ac_clip_1)" clipPathUnits="userSpaceOnUse" fill="none" stroke="none" d="M 0,0"></path> <path id="69" clip-path="url(file:///C:/Users/user1/Desktop/svg.html#ac_clip_2)" clipPathUnits="userSpaceOnUse" fill="none" stroke="none" d="M 0,0"></path> .... </svg> </div> I want to replace clip-path="url(file:///C:/Users/user1/Desktop/svg.html#ac_clip_1/2/3...) from the entire HTML with clip-path="url(#ac_clip_1/2/3..) Any heads up will be appreciated.
To retrieve the elements with the attribute, do .querySelectorAll('[clip-path]') on the containing element.
Then loop over all the elements and do .replace(/^.*#/, '#') on all the clip-path attribute values.
Demo
Details commented in demo
/*
Collect all <path>s -- that have the [clip-path] attribute that
has the value of "url" anywhere within it -- into a NodeList.
*/
var paths = document.querySelectorAll('path[clip-path*=url]');
/*
On each loop through the NodeList...
...use .setAttributeNS() to change the value of [clip-path]
attribute...
...and modify the value by incrementing the last char by index +1
*/
for (let i = 0; i < paths.length; i++) {
paths[i].setAttributeNS(null, 'clip-path', `url(#ac_clip_${(i + 1)})`);
console.log(`path#${paths[i].id}[clip-path="${ paths[i].getAttributeNS(null, 'clip-path')}"]`);
}
<p>Use Developer Tools to verify new [clip-path] values.</p>
<div>
<svg xmlns="http://www.w3.org/2000/svg" border="0" width="1303" height="347" role="presentation" style="display: block;">
<clipPath clip-rule="nonzero" id="ac_clip_1">
<path data-ac-wrapper-id="26" fill="none" stroke="black" d="M 96 10 L 1283 10 1283 295 96 295 96 10 Z"></path>
</clipPath>
<clipPath clip-rule="nonzero" id="ac_clip_2">
<path data-ac-wrapper-id="28" fill="none" stroke="black" d="M 96 10 L 1283 10 1283 295 96 295 96 10 Z"></path>
</clipPath>
<clipPath clip-rule="nonzero" id="ac_clip_3">
<path data-ac-wrapper-id="30" fill="none" stroke="black" d="M 96 10 L 1283 10 1283 295 96 295 96 10 Z"></path>
</clipPath>
<g data-ac-wrapper-id="23">
<path data-ac-wrapper-id="24" fill="transparent" stroke="none" d="M 0 0 L 1303 0 1303 0 1303 347 1303 347 0 347 0 347 0 0 0 0 Z">
</path>
</g>
<path id="68" clip-path="url(file:///C:/Users/user1/Desktop/svg.html#ac_clip_1)" clipPathUnits="userSpaceOnUse" fill="none" stroke="none" d="M 0,0"></path>
<path id="69" clip-path="url(file:///C:/Users/user1/Desktop/svg.html#ac_clip_2)" clipPathUnits="userSpaceOnUse" fill="none" stroke="none" d="M 0,0"></path>
<path id="70" clip-path="url(file:///C:/Users/user1/Desktop/svg.html#ac_clip_3)" clipPathUnits="userSpaceOnUse" fill="none" stroke="none" d="M 0,0"></path>
</svg>
</div>
We can use setAttribute on the DOM.
getElementById
We can use getElementById if you want to do this on path's with a specific id.
document.getElementById("68").setAttribute("clip-path", "url(#ac_clip_1/2/3..)");
getElementsByTagName
A more elegant solution would be to use getElementsByTagName to replace them all in case your replacement string is not unique. If your clip-paths have incremental id's you can use the index variable provided in the foreach to manipulate the replacement URL accordingly.
var allPaths = document.getElementsByTagName("path");
allPaths.forEach(function(element, index){
element.setAttribute("clip-path", "url(#ac_clip_1/2/3..)");
});
SVG - Not Displaying in Browser
I'm working on a SVG animation, and i'm trying to add a Red-Circle and a Green-Circle to the front of the printer. When you inspect my code you can see that #red-light, and #green-light are showing in the DOM, but it's not visible. Does anybody know why they are both not showing as visisble? https://codepen.io/stinkytofu3311/pen/VbYjNK <div class="svg-wrapper"> <div class="svg-container"> <svg viewBox="0 0 356 356" style="border:solid 0px black" preserveAspectRatio="xMinYMin meet" class="svg-content"> <defs> <path d="M3.26 0.75C2 0.75 0.98 1.78 0.98 3.04L0.98 5.32 114.7 5.32 114.7 3.04C114.7 1.77 113.68 0.75 112.42 0.75L3.26 0.75Z" id="path-1"/> <path d="M65.84 0.05L0.53 0.05C0.53 0.05 29.77 15.29 65.84 15.29 101.91 15.29 131.76 0.05 131.76 0.05L65.84 0.05Z" id="path-3"/> </defs> <!-- Background Circle --> <g id="background"> <g id="bg-circle" transform="translate(-47.000000, -145.000000)"> <path class="bg-circle-color" d="M225,500.6c98.3,0,178-79.4,178-177.3S323.2,146,225,146S47,225.4,47,323.3S126.7,500.6,225,500.6z"/> </g> </g> <!-- Printer Front-Bottom --> <g id="front-bottom" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(76.000000, 222.000000)"> <path d="M203.21 1.36C203.21 1.36 203.21 7.23 203.21 7.23 203.21 10.57 200.49 13.27 197.17 13.27L6.45 13.27C3.11 13.27 0.41 10.57 0.41 7.22L0.41 1.3C0.41 0.58 203.21 3.39 203.21 1.36Z" id="Front-Panel-Bottom" fill="#E7E7E7"/> <path d="M158.7 0.32L158.7 2.61C158.7 3.87 157.69 4.89 156.42 4.89L47.26 4.89C46 4.89 44.98 3.88 44.98 2.61L44.98 0.32 158.7 0.32Z" id="Front-Hole-Bottom" fill="#8F8E8E"/> </g> <!-- Printer Top-Panel --> <g id="top-panel-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(85.000000, 114.000000)"> <polygon fill="#F9F9F9" points="0.33 18 0.33 17.91 6.85 0.31 179.92 0.01 186.15 17.91 186.15 18"/> <path d="M45.19 14.89C45.44 14.4 46.1 14 46.64 14L137.48 14C138.03 14 138.68 14.41 138.92 14.89L140.54 18.11 44.65 17.86C44.1 17.86 43.86 17.46 44.12 16.96L45.19 14.89Z" id="Top-Feed-1" fill="#B9B9B9"/> </g> <!-- File --> <g id="filewrapper"> <g id="file" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(133.000000, 55.000000)"> <polyline id="Paper-Body" fill="#F6A623" points="0.12 0 72.17 0 86.12 14.41 86.12 92.54 0.24 92.54"/> <polygon id="Paper-Top-Right-Fold" fill="#AA7216" points="70.88 0 70.88 15.83 86.84 15.83"/> <text id="AI-Text" font-family="MyriadPro-Bold, Myriad Pro" font-size="49.52" font-weight="bold" letter-spacing="-1.57" fill="#FFFFFF"> <tspan x="20.82" y="63.66"> Ai </tspan> </text> </g> <!-- File- Tag --> <g id="file-tag-group" transform="translate(70.000000, 40.000000)"> <g id="background-color"> <defs><rect id="SVGID_1_" x="-80" y="-35.9" width="496" height="363"/></defs><defs> <path id="SVGID_2_" d="M29.5 27c0-3.3 2.7-6 6-6h35.4c3.3 0 6 2.7 6 6v14.9c0 3.3-2.7 6-6 6H35.5c-3.3 0-6-2.7-6-6V27L29.5 27z"/> </defs> <defs> <path id="SVGID_3_" d="M8.5 0h89.4v68.9H8.5V0zM30.5 27c0-2.8 2.2-5 5-5h35.4c2.8 0 5 2.2 5 5v14.9c0 2.8-2.2 5-5 5H35.5c-2.8 0-5-2.2-5-5V27L30.5 27zM28.5 27v14.9c0 3.9 3.1 7 7 7h35.4c3.9 0 7-3.1 7-7V27c0-3.9-3.1-7-7-7H35.5C31.6 20 28.5 23.1 28.5 27L28.5 27z"/> </defs> <clipPath id="SVGID_4_"><use xlink:href="#SVGID_1_"/></clipPath> <clipPath id="SVGID_5_" class="sta"><use xlink:href="#SVGID_2_"/></clipPath> <clipPath id="SVGID_6_" class="stb"><use xlink:href="#SVGID_3_"/></clipPath> <path class="stc" d="M29.5 27c0-3.3 2.7-6 6-6h35.4c3.3 0 6 2.7 6 6v14.9c0 3.3-2.7 6-6 6H35.5c-3.3 0-6-2.7-6-6V27L29.5 27z"/></g><g id="stroke"> <defs> <rect id="SVGID_7_" x="-80" y="-35.9" width="496" height="363"/></defs> <defs> <path id="SVGID_8_" d="M29.5 27c0-3.3 2.7-6 6-6h35.4c3.3 0 6 2.7 6 6v14.9c0 3.3-2.7 6-6 6H35.5c-3.3 0-6-2.7-6-6V27L29.5 27z"/> </defs> <clipPath id="SVGID_9_"><use xlink:href="#SVGID_7_"/></clipPath> <clipPath id="SVGID_10_" class="std"><use xlink:href="#SVGID_8_"/></clipPath> <path class="ste" d="M29.5 27c0-3.3 2.7-6 6-6h35.4c3.3 0 6 2.7 6 6v14.9c0 3.3-2.7 6-6 6H35.5c-3.3 0-6-2.7-6-6V27L29.5 27z"/></g> <path id="file-text" class="stf" d="M41.6 33.9h1.3v7h2.3v-7H47v-1.8h-1.7v-0.6c0-0.4 0.1-0.7 0.2-0.9 0.1-0.2 0.4-0.2 0.7-0.2 0.3 0 0.7 0 1.1 0.1l0.3-1.6c-0.6-0.2-1.3-0.3-1.9-0.3 -0.6 0-1.2 0.1-1.6 0.3 -0.4 0.2-0.7 0.5-0.9 0.9s-0.2 0.9-0.2 1.7v0.7h-1.3V33.9L41.6 33.9zM50.5 30.9v-2.2h-2.3v2.2H50.5L50.5 30.9zM50.5 40.9v-8.8h-2.3v8.8H50.5L50.5 40.9zM55 40.9V28.8h-2.3v12.1H55L55 40.9zM61.8 39.1c-0.2 0.2-0.6 0.3-0.9 0.3 -0.5 0-1-0.2-1.3-0.6 -0.4-0.4-0.5-0.9-0.6-1.6h5.8c0-1.8-0.3-3.1-1.1-4 -0.8-0.9-1.8-1.3-3.1-1.3 -1.2 0-2.1 0.4-2.9 1.2 -0.8 0.8-1.1 2-1.1 3.4 0 1.2 0.3 2.2 0.9 3 0.7 1 1.9 1.5 3.4 1.5 1 0 1.8-0.2 2.4-0.7 0.6-0.4 1.1-1.1 1.4-1.9l-2.3-0.4C62.2 38.5 62.1 38.9 61.8 39.1L61.8 39.1zM59 35.8c0-0.6 0.2-1.1 0.5-1.5 0.3-0.4 0.8-0.6 1.3-0.6 0.5 0 0.9 0.2 1.2 0.5 0.3 0.4 0.5 0.9 0.5 1.5H59L59 35.8z"/> </g> </g> <!-- Printer Paper --> <g id="printer-paper" transform="translate(100.000000, 115.000000)"> <g id="end_3_"> <g id="end"> <!-- Printer Paper End Graphic --> <polygon id="paper-base_1_" class="st0 start1" points="147.8,107.5 7.8,107.5 29.3,25.5 126.3,25.5 "/> <polygon class="st1 start2" points="139.5,103.2 16,103.2 19.8,87.1 135.7,87.1 "/> <polygon class="st1 start3" points="74.8,82.9 20.8,82.9 24,69.1 75,69.1 "/> <polygon class="st1 start4" points="134.7,82.9 80.7,82.9 80.6,77.8 133.5,77.8 "/> <polygon class="st1 start5" points="75.1,65.1 25,65.1 27.7,53.3 75.2,53.3 "/> <polygon class="st1 start6" points="124.6,39.8 30.9,39.8 33.5,28.7 122,28.7 "/> <polygon class="st1 start7" points="132.8,73.9 80.7,73.9 80.7,69.1 131.7,69.1 "/> <polygon class="st1 start8" points="130.6,65.4 80.4,65.4 80.4,61 129.6,61 "/> <polygon class="st1 start9" points="128.7,57.1 80.3,57.1 80.3,53 127.7,53 "/> <polygon class="st1 start10" points="127,49.8 80.3,49.8 80.2,46 126.1,46 "/> </g> </g> <g id="start"> <!-- Printer Paper Start Graphic --> <g id="start_1_"> <rect id="paper-base" x="29.3" y="25.4" class="st0 end1" width="97" height="82"/> <rect x="34.3" y="92.1" class="st1 end2" width="86.9" height="12.3"/> <rect x="34.3" y="76.4" class="st1 end3" width="41.3" height="12.3"/> <rect x="80" y="84.2" class="st1 end4" width="41.3" height="4.4"/> <rect x="34.3" y="60.3" class="st1 end5" width="41.3" height="12.3"/> <rect x="34.3" y="29.9" class="st1 end6" width="86.9" height="14.6"/> <rect x="80.1" y="76.4" class="st1 end7" width="41.3" height="4.4"/> <rect x="80" y="68.4" class="st1 end8" width="41.3" height="4.4"/> <rect x="80" y="60" class="st1 end9" width="41.3" height="4.4"/> <rect x="80" y="52.1" class="st1 end10" width="41.3" height="4.4"/> </g> </g> </g> <!-- Printer Body --> <g id="Printer-Body" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(76.000000, 130.000000)"> <polygon id="Front-Fill" fill="#E7E7E7" points="0.41 24.29 0.41 83.57 0.41 94 203.21 94 203.21 83.62 203.21 24.29"/> <g id="Bottom-Feed" transform="translate(44.000000, 89.000000)"> <mask id="mask-2" fill="white"> <use xlink:href="#path-1"/> </mask> <polygon id="Fill-2" fill="#8E8E8E" mask="url(#mask-2)" points="-4.02 10.32 119.7 10.32 119.7 -4.25 -4.02 -4.25"/> </g> <g id="Fronot-Decor" transform="translate(36.000000, 24.000000)"> <mask id="mask-4" fill="white"> <use xlink:href="#path-3"/> </mask> <g id="Front-Decor"/> <polygon id="Fill-5" fill="#A7A6A6" mask="url(#mask-4)" points="-4.47 20.29 136.76 20.29 136.76 -4.95 -4.47 -4.95"/> </g> <polygon id="Top" fill="#F9F9F9" points="9.33 0.91 0.67 24.3 203.47 24.8 195.16 0.91"/> <polygon id="Vent-3" fill="#FFFFFF" points="7.29 37.24 29.47 37.24 29.47 31.91 7.29 31.91"/> <polygon id="Vent-2" fill="#FFFFFF" points="7.29 44.09 29.47 44.09 29.47 38.76 7.29 38.76"/> <polygon id="Vent-1" fill="#FFFFFF" points="7.29 50.95 29.47 50.95 29.47 45.62 7.29 45.62"/> </g> <!-- Red Light --> <g id="red-light" transform="translate(90.000000, 70.000000)"> <defs> <rect id="SVGID_1_" x="-247.7" y="-163.5" width="496" height="363"/></defs> <defs> <path id="SVGID_2_" d="M18.6 22.1c1.4 0 2.5-1.2 2.5-2.6 0-1.5-1.1-2.6-2.5-2.6 -1.4 0-2.5 1.2-2.5 2.6C16 20.9 17.2 22.1 18.6 22.1L18.6 22.1z"/> </defs> <clipPath id="SVGID_3_"><use xlink:href="#SVGID_1_"/></clipPath> <clipPath id="SVGID_4_" class="sth"><use xlink:href="#SVGID_2_"/></clipPath> <rect x="11" y="11.8" class="sti" width="15.1" height="15.3"/> </g> <!-- Green Light --> <g id="green-light"> <defs> <rect id="SVGID_1_" x="-248" y="-152.4" width="496" height="363"/> </defs> <defs> <path id="SVGID_2_" d="M18.7,25.6c2,0,3.7-1.7,3.7-3.8c0-2.1-1.6-3.8-3.7-3.8c-2,0-3.7,1.7-3.7,3.8C15,23.9,16.6,25.6,18.7,25.6 L18.7,25.6z"/> </defs> <clipPath id="SVGID_3_"> <use xlink:href="#SVGID_1_" style="display:none;overflow:visible;"/> </clipPath> <clipPath id="SVGID_4_" class="stk"> <use xlink:href="#SVGID_2_" style="overflow:visible;"/> </clipPath> <rect x="10" y="13" class="stl" width="17.3" height="17.6"/> </g> <!-- Tap Panel that covers paper --> <g id="Top-Panel-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(128.000000, 130.000000)"> <path d="M1.53 0.89C1.79 0.4 2.45 0 2.99 0L93.82 0C94.37 0 95.02 0.41 95.26 0.89L96.88 4.11 0.99 3.86C0.44 3.86 0.21 3.46 0.46 2.96L1.53 0.89Z" id="Top-Feed-1" fill="#B9B9B9" transform="translate(48.440524, 2.053393) scale(1, -1) translate(-48.440524, -2.053393) "/> </g> </svg> </svg>
SVG path is not proper when draw Arc using different angle
I am using HTML5 SVG and draw doughnut shape with different angle (90 and 120). But using angle 120, The doughnut path is not proper. This is my code. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1350" height="500"> <path id="container1" fill="#3082bd" stroke-width="2" stroke-dasharray="" d="M 837.5 248 A 164.5 164.5 0 1 1 837.4999999999177 247.99983549999993 L 766.9999999999529 247.99990599999995 A 94 94 1 1 0 767 248 z" stroke="white" stroke-linecap="butt" stroke-linejoin="round" opacity="1" radius="164.5" start="0.0007963267948964958" end="6.2839816339744825" innerR="94" counterClockWise="false" x="673" y="248" visibility="visible"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1350" height="500"> <path id="container2" fill="#3082bd" stroke-width="2" stroke-dasharray="" d="M 815.4611789225402 330.25 A 164.5 164.5 0 1 1 815.461261172469 330.2498575387798 L 754.4064349556966 294.99991859358846 A 94 94 1 1 0 754.4063879557373 295 z" stroke="white" stroke-linecap="butt" stroke-linejoin="round" opacity="1" radius="164.5" start="0.5243951023931952" end="6.807580409572781" innerR="94" counterClockWise="false" x="673" y="248" visibility="visible"></path> </svg> JsFiddle Let me know what i did mistake on this Thanks, Bharathi.
In your second path, the inner arc should be rotated: A 94 94 45 1 0 754.4063879557373 295 z Maybe someone more knowledgeable than me can explain the math behind it, and why it is like this... <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1350" height="500"> <path id="container1" fill="#3082bd" stroke-width="2" stroke-dasharray="" d="M 837.5 248 A 164.5 164.5 0 1 1 837.4999999999177 247.99983549999993 L 766.9999999999529 247.99990599999995 A 94 94 1 1 0 767 248 z" stroke="white" stroke-linecap="butt" stroke-linejoin="round" opacity="1" radius="164.5" start="0.0007963267948964958" end="6.2839816339744825" innerR="94" counterClockWise="false" x="673" y="248" visibility="visible"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1350" height="500"> <path id="container2" fill="#3082bd" stroke-width="2" stroke-dasharray="" d="M 815.4611789225402 330.25 A 164.5 164.5 0 1 1 815.461261172469 330.2498575387798 L 754.4064349556966 294.99991859358846 A 94 94 45 1 0 754.4063879557373 295 z" stroke="white" stroke-linecap="butt" stroke-linejoin="round" opacity="1" radius="164.5" start="0.5243951023931952" end="6.807580409572781" innerR="94" counterClockWise="false" x="673" y="248" visibility="visible"></path> </svg>