How to add text on click SVG rectangle using JS - javascript

I have this SVG file... I want to add some text when clicking to rectangles and it shouldn't for the black one... Like when i click on any rectangle then it should be >> g rectangle text /g
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="1200px" height="800px" viewBox="0 0 1200 800" enable-background="new 0 0 1200 800" xml:space="preserve">
<!-- <rect x="50.683" y="111.41" fill="#FFFFFF" stroke="#231F20" stroke-width="3" stroke-miterlimit="10" width="1116.428" height="578.514"/> -->
<rect x="76.564" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.682" height="84.682"/>
<rect x="173.42" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.683" height="84.682"/>
<rect x="270.276" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.682" height="84.682"/>
<rect x="367.133" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.683" height="84.682"/>
<rect x="463.989" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.683" height="84.682"/>
<rect x="667.414" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.682" height="84.682"/>
<rect x="764.27" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.682" height="84.682"/>
<rect x="861.126" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.683" height="84.682"/>
<rect x="957.983" y="132.216" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.681" height="84.682"/>
<rect x="1054.839" y="132.216" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.683" height="84.682"/>
<rect x="41.042" y="351.442" fill="#FFFFFF" width="23.851" height="112.15"/>
<rect x="31.853" y="375.293" fill="#494849" width="1118.006" height="65.463"/>
<rect x="76.564" y="252.552" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.682" height="84.682"/>
<rect x="173.42" y="252.552" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.683" height="84.682"/>
</svg>


You will need to create the text node. The x and y of the text - in this case - is the center of the rect.
Please read the comments in my code.
const SVG_NS = 'http://www.w3.org/2000/svg';
//the array of the rects with a white fill
let rects = Array.from(svg.querySelectorAll("rect[fill='#FFFFFF']"));
//an array of true values as long as the rects array
let arr = Array(rects.length).fill(true);
//for each rect in the rects array
rects.forEach((r,i)=>{
//get the position end the size of the rect (the bounding box)
let bb = r.getBBox();
//the center of the rect
let x = bb.x + bb.width/2;
let y = bb.y + bb.height/2;
//on click
r.addEventListener("click", ()=>{
//if there isn't already a text element there
if(arr[i]){
//add a text element
let txt = drawSVGelmt({x:x,y:y},"text", svg)
txt.textContent = i;
arr[i] = false;
}
})
})
// a function to create a new svg element
function drawSVGelmt(o,tag, parent) {
let elmt = document.createElementNS(SVG_NS, tag);
for (var name in o) {
if (o.hasOwnProperty(name)) {
elmt.setAttributeNS(null, name, o[name]);
}
}
parent.appendChild(elmt);
return elmt;
}
text{text-anchor:middle; dominant-baseline:middle}
<svg id="svg" width="1200px" height="800px" viewBox="0 0 1200 800" >
<rect x="76.564" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.682" height="84.682"/>
<rect x="173.42" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.683" height="84.682"/>
<rect x="270.276" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.682" height="84.682"/>
<rect x="367.133" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.683" height="84.682"/>
<rect x="463.989" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.683" height="84.682"/>
<rect x="667.414" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.682" height="84.682"/>
<rect x="764.27" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.682" height="84.682"/>
<rect x="861.126" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.683" height="84.682"/>
<rect x="957.983" y="132.216" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.681" height="84.682"/>
<rect x="1054.839" y="132.216" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.683" height="84.682"/>
<rect x="41.042" y="351.442" fill="#FFFFFF" width="23.851" height="112.15"/>
<rect x="31.853" y="375.293" fill="#494849" width="1118.006" height="65.463"/>
<rect x="76.564" y="252.552" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.682" height="84.682"/>
<rect x="173.42" y="252.552" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.683" height="84.682"/>
</svg>
Observation: since the user can click many time on one rect I needed to add a condition. If there is no text node there create one, else don't.

Related

How do I add a fill color between lines on an svg?

I have a svg image that contains multiples path and i want to add a background color inside my image.
I want my background color only between my black lines.
Do you know some tools please ?
For the moment, i think i will merge paths and create a polygon. But i think is not a good solution.
Svg:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" viewBox="0 0 285 261" enable-background="new 0 0 285 261" xml:space="preserve">
<path fill="none" opacity="1.000000" stroke="#000000" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2.000000"
d="
M164.000000,33.500000
C164.833328,43.333332 165.675537,53.165928 166.498123,63.000156
C168.171005,82.999634 169.910492,102.993973 171.474167,123.002022
C172.606567,137.491669 173.448700,152.003769 174.514191,166.498962
C175.617111,181.503647 176.883545,196.496338 177.976624,211.501709
C178.449387,217.991547 178.666656,224.500000 178.999985,231.000000
"/>
<path fill="none" opacity="1.000000" stroke="#000000" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2.000000"
d="
M205.000000,33.500000
C211.705887,48.559238 215.482666,64.496674 218.985229,80.503227
C226.634079,115.458031 230.594208,150.944061 233.962753,186.503525
C235.034225,197.814301 235.715897,209.163452 236.456482,220.502838
C236.596710,222.649948 236.929367,224.891998 235.656830,227.817383
C162.666672,234.509201 89.333336,235.739029 15.502701,228.046219
C15.894063,223.319000 16.197031,219.659500 16.499998,216.000000
"/>
<path fill="none" opacity="1.000000" stroke="#000000" stroke-linecap="round" stroke-linejoin="round"
stroke-width="3.000000"
d="
M48.500000,33.000000
C100.500534,33.000000 152.501068,33.000000 204.650604,33.000000
C205.677261,27.124668 203.990173,21.838848 204.576874,16.250000
C152.500000,16.250000 101.000000,16.250000 49.660480,16.250000
C48.325832,18.359861 48.603340,20.451437 48.482582,22.498972
C48.084709,29.245363 46.420258,35.630894 44.107647,42.038849
C33.721039,70.818932 28.822332,100.874130 24.570915,131.010010
C21.013802,156.224365 18.429388,181.560898 16.995337,206.999741
C16.863691,209.335037 16.731928,211.673782 16.478987,213.997711
C16.282843,215.799805 17.442259,215.521439 18.500000,215.500000
"/>
<path fill="none" opacity="1.000000" stroke="#000000" stroke-linecap="round" stroke-linejoin="round"
stroke-width="3.000000"
d="
M164.000000,17.000000
C164.000000,22.166666 164.000000,27.333334 164.000000,32.500000
"/>
</svg>
It looks like :

You should use MASK: use the same path in the mask
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" viewBox="0 0 285 261" enable-background="new 0 0 285 261" xml:space="preserve" style="">
<defs>
<mask id="mask-path1" x="0" y="0" width="1" height="1">
<path fill="#fff" d="
M205.000000,33.500000
C211.705887,48.559238 215.482666,64.496674 218.985229,80.503227
C226.634079,115.458031 230.594208,150.944061 233.962753,186.503525
C235.034225,197.814301 235.715897,209.163452 236.456482,220.502838
C236.596710,222.649948 236.929367,224.891998 235.656830,227.817383
C162.666672,234.509201 89.333336,235.739029 15.502701,228.046219
C15.894063,223.319000 16.197031,219.659500 16.499998,216.000000
"></path>
</mask><mask id="mask-path2" x="0" y="0" width="1" height="1">
<path fill="#fff" d="
M48.500000,33.000000
C100.500534,33.000000 152.501068,33.000000 204.650604,33.000000
C205.677261,27.124668 203.990173,21.838848 204.576874,16.250000
C152.500000,16.250000 101.000000,16.250000 49.660480,16.250000
C48.325832,18.359861 48.603340,20.451437 48.482582,22.498972
C48.084709,29.245363 46.420258,35.630894 44.107647,42.038849
C33.721039,70.818932 28.822332,100.874130 24.570915,131.010010
C21.013802,156.224365 18.429388,181.560898 16.995337,206.999741
C16.863691,209.335037 16.731928,211.673782 16.478987,213.997711
C16.282843,215.799805 17.442259,215.521439 18.500000,215.500000
"></path>
</mask>
</defs>
<path fill="none" opacity="1.000000" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.000000" d="
M164.000000,33.500000
C164.833328,43.333332 165.675537,53.165928 166.498123,63.000156
C168.171005,82.999634 169.910492,102.993973 171.474167,123.002022
C172.606567,137.491669 173.448700,152.003769 174.514191,166.498962
C175.617111,181.503647 176.883545,196.496338 177.976624,211.501709
C178.449387,217.991547 178.666656,224.500000 178.999985,231.000000
" style="
fill: aqua;
" mask="url(#mask-path1)"></path>
<path fill="black" opacity="1.000000" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.000000" d="
M205.000000,33.500000
C211.705887,48.559238 215.482666,64.496674 218.985229,80.503227
C226.634079,115.458031 230.594208,150.944061 233.962753,186.503525
C235.034225,197.814301 235.715897,209.163452 236.456482,220.502838
C236.596710,222.649948 236.929367,224.891998 235.656830,227.817383
C162.666672,234.509201 89.333336,235.739029 15.502701,228.046219
C15.894063,223.319000 16.197031,219.659500 16.499998,216.000000
" mask="url(#mask-path1)"></path>
<path fill="black" opacity="1.000000" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.000000" d="
M48.500000,33.000000
C100.500534,33.000000 152.501068,33.000000 204.650604,33.000000
C205.677261,27.124668 203.990173,21.838848 204.576874,16.250000
C152.500000,16.250000 101.000000,16.250000 49.660480,16.250000
C48.325832,18.359861 48.603340,20.451437 48.482582,22.498972
C48.084709,29.245363 46.420258,35.630894 44.107647,42.038849
C33.721039,70.818932 28.822332,100.874130 24.570915,131.010010
C21.013802,156.224365 18.429388,181.560898 16.995337,206.999741
C16.863691,209.335037 16.731928,211.673782 16.478987,213.997711
C16.282843,215.799805 17.442259,215.521439 18.500000,215.500000
" mask="url(#mask-path2)"></path>
<path fill="none" opacity="1.000000" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.000000" d="
M164.000000,17.000000
C164.000000,22.166666 164.000000,27.333334 164.000000,32.500000
" mask="url(#mask-path1)"></path>
</svg>

how to increase loading percentage in SVG?

I am very new to SVG, I have a SVG already in my theme, it looks like something this.
The SVG Html looks like this
<div id="apexcharts1q6mbbep" class="apexcharts-canvas apexcharts1q6mbbep apexcharts-theme-light" style="width: 40px; height: 41px;"><svg id="SvgjsSvg1099" width="40" height="41" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev" class="apexcharts-svg" xmlns:data="ApexChartsNS" transform="translate(0, 0)" style="background: transparent;">
<g id="SvgjsG1101" class="apexcharts-inner apexcharts-graphical" transform="translate(0, 0)">
<defs id="SvgjsDefs1100">
<clipPath id="gridRectMask1q6mbbep">
<rect id="SvgjsRect1103" width="46" height="42" x="-3" y="-1" rx="0" ry="0" opacity="1" stroke-width="0" stroke="none" stroke-dasharray="0" fill="#fff"></rect>
</clipPath>
<clipPath id="forecastMask1q6mbbep"></clipPath>
<clipPath id="nonForecastMask1q6mbbep"></clipPath>
<clipPath id="gridRectMarkerMask1q6mbbep">
<rect id="SvgjsRect1104" width="44" height="44" x="-2" y="-2" rx="0" ry="0" opacity="1" stroke-width="0" stroke="none" stroke-dasharray="0" fill="#fff"></rect>
</clipPath>
</defs>
<g id="SvgjsG1105" class="apexcharts-radialbar">
<g id="SvgjsG1106">
<g id="SvgjsG1107" class="apexcharts-tracks">
<g id="SvgjsG1108" class="apexcharts-radialbar-track apexcharts-track" rel="1">
<path id="apexcharts-radialbarTrack-0" d="M 20 4.146341463414631 A 15.85365853658537 15.85365853658537 0 1 1 19.99723301461454 4.1463417048796565" fill="none" fill-opacity="1" stroke="rgba(242,242,242,0.85)" stroke-opacity="1" stroke-linecap="butt" stroke-width="2.3658536585365857" stroke-dasharray="0" class="apexcharts-radialbar-area" data:pathOrig="M 20 4.146341463414631 A 15.85365853658537 15.85365853658537 0 1 1 19.99723301461454 4.1463417048796565"></path>
</g>
</g>
<g id="SvgjsG1110">
<g id="SvgjsG1112" class="apexcharts-series apexcharts-radial-series" seriesName="series-1" rel="1" data:realIndex="0">
<path id="SvgjsPath1113" d="M 20 4.146341463414631 A 15.85365853658537 15.85365853658537 0 1 1 14.061114982430661 34.699256230936875" fill="none" fill-opacity="0.85" stroke="rgba(47,179,68,0.85)" stroke-opacity="1" stroke-linecap="butt" stroke-width="2.439024390243903" stroke-dasharray="0" class="apexcharts-radialbar-area apexcharts-radialbar-slice-0" data:angle="202" data:value="56" index="0" j="0" data:pathOrig="M 20 4.146341463414631 A 15.85365853658537 15.85365853658537 0 1 1 14.061114982430661 34.699256230936875"></path>
</g>
<circle id="SvgjsCircle1111" r="14.670731707317076" cx="20" cy="20" class="apexcharts-radialbar-hollow" fill="transparent"></circle>
</g>
</g>
</g>
<line id="SvgjsLine1114" x1="0" y1="0" x2="40" y2="0" stroke="#b6b6b6" stroke-dasharray="0" stroke-width="1" stroke-linecap="butt" class="apexcharts-ycrosshairs"></line>
<line id="SvgjsLine1115" x1="0" y1="0" x2="40" y2="0" stroke-dasharray="0" stroke-width="0" stroke-linecap="butt" class="apexcharts-ycrosshairs-hidden"></line>
</g>
<g id="SvgjsG1102" class="apexcharts-annotations"></g>
</svg>
<div class="apexcharts-legend"></div>
</div>
I played around <cicle> tag but I failed to increase the percentage. Currently you can see the loading icon is around 50% I want to make it dynamic.
Can anyone help me out?

Two or more SVGs in a page. How can I animate them on button click?

Same SVG is repeated in carousel multiple times. Carousel is constructed in PHP using a while loop. How can I trigger animation at the click of a next/prev button in carousel?
My jQuery code is as below. It animates only the first <animate> tag. I think I must have explained my whole point.
jQuery(document).ready(function($){
$('.first').click(function(){
$('animate')[0].beginElement();
$('animateTransform')[0].beginElement();
});
});
My SVG code:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 425 386" style="enable-background:new 0 0 425 386;" xml:space="preserve">
<polygon class="st0" points="356.4,330 399.3,370.8 399.3,82.5 357.3,106.5 "/>
<polygon class="st1" points="63.8,105 63.8,329.3 357.3,329.3 357.3,106.5 "/>
<polygon class="st2" points="21.8,369 62.5,329.3 357.3,329.3 399.3,370.8 20.9,370.8 "/>
<polygon class="st0" points="63.8,329.2 20.9,370.8 20.9,82.5 63.8,105 "/>
<g>
<line class="st3" id="line1" x1="65.2" y1="76.3" x2="180.9" y2="76.3"/>
<animate xlink:href="#line1" attributeName="x2" from="65" to="180.9" dur="2s" class="ani" />
<line class="st3" id="line2" x1="237.6" y1="76.3" x2="338.6" y2="76.3"/>
<animate xlink:href="#line2" attributeName="x2" from="250" to="338.6" dur="2s" class="ani" />
<text x="200" y="80" class="wt1">10'</text>
</g>
<g>
<g>
<text x="368" y="70" class="wt1">5'</text>
</g>
<line class="st3" id="line3" x1="352.1" y1="76.9" x2="362.6" y2="70.8"/>
<animate xlink:href="#line3" attributeName="x2" from="351" to="362.6" dur="3s" class="ani" />
<animate xlink:href="#line3" attributeName="y2" from="77" to="70.8" dur="3s" class="ani" />
<line class="st3" id="line4" x1="387.7" y1="58" x2="396.6" y2="51.9"/>
<animate xlink:href="#line4" attributeName="x2" from="388" to="396.6" dur="3s" class="ani" />
<animate xlink:href="#line4" attributeName="y2" from="58" to="51.9" dur="3s" class="ani" />
</g>
<g>
<ellipse class="st4" id="elli1" cx="210.1" cy="344.8" rx="37.2" ry="4.5"/>
<animate xlink:href="#elli1" attributeName="rx" from="7.2" to="37.2" dur="3s" class="ani" />
<animate xlink:href="#elli1" attributeName="ry" from="0.2" to="4.5" dur="3s" class="ani" />
<g id="box1" transform="translate(0, 0)">
<polygon class="st5" points="230.8,307.5 213,307.5 213,307.9 213,314.1 207,314.1 207,307.5 189.2,307.5 188.9,345.4 231.2,345.4
"/>
<path class="st6" d="M207,307.3v-6.9c0-0.2,6-0.1,6-0.1v7.1h17.8l-8-7.1h-26.7l-7,7.1H207V307.3z"/>
<polygon class="st7" points="207,314.1 213,314.1 213,307.9 213,307.5 207,307.5 "/>
<path class="st8" d="M207,300.4v6.9v0.1h6v-7.1C213,300.4,207,300.2,207,300.4z"/>
<animateTransform xlink:href="#box1" attributeName="transform" type="translate" from="0 -70" to="0 0" dur="3s" class="ani" />
</g>
</g>
</svg>

You forgot to add a question style sheet. I restored the color values of the svg parts according to the figure.
Since all animations should start simultaneously at the click of a mouse, you can do without Javascript
To do this, add a launch command to each animation begin="Layer_1.click"
.container {
width:75%;
height:75%;
}
.st0 {fill:#C8C8C8;}
.st1 {fill:#E7E7E7;}
.st2 {fill:#6A6A6A;}
.st3 {stroke:#F6C44A;}
.st4 {fill:#323232;}
.st5 {fill:#CB9751;}
.st6 {fill:#E0B268;}
.st7 {fill:#C8A066;}
.st8 {fill:#E3C084;}
<div class="container">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 425 386" style="enable-background:new 0 0 425 386;" xml:space="preserve">
<polygon class="st0" points="356.4,330 399.3,370.8 399.3,82.5 357.3,106.5 "/>
<polygon class="st1" points="63.8,105 63.8,329.3 357.3,329.3 357.3,106.5 "/>
<polygon class="st2" points="21.8,369 62.5,329.3 357.3,329.3 399.3,370.8 20.9,370.8 "/>
<polygon class="st0" points="63.8,329.2 20.9,370.8 20.9,82.5 63.8,105 "/>
<g>
<line class="st3" id="line1" x1="65.2" y1="76.3" x2="180.9" y2="76.3"/>
<animate xlink:href="#line1" attributeName="x2" from="65" to="180.9" begin="Layer_1.click" dur="2s" class="ani" />
<line class="st3" id="line2" x1="237.6" y1="76.3" x2="338.6" y2="76.3"/>
<animate xlink:href="#line2" attributeName="x2" from="250" to="338.6" begin="Layer_1.click" dur="2s" class="ani" />
<text x="200" y="80" class="wt1">10'</text>
</g>
<g>
<g>
<text x="368" y="70" class="wt1">5'</text>
</g>
<line class="st3" id="line3" x1="352.1" y1="76.9" x2="362.6" y2="70.8"/>
<animate xlink:href="#line3" attributeName="x2" from="351" to="362.6" begin="Layer_1.click" dur="3s" class="ani" />
<animate xlink:href="#line3" attributeName="y2" from="77" to="70.8" begin="Layer_1.click" dur="3s" class="ani" />
<line class="st3" id="line4" x1="387.7" y1="58" x2="396.6" y2="51.9"/>
<animate xlink:href="#line4" attributeName="x2" from="388" to="396.6" begin="Layer_1.click" dur="3s" class="ani" />
<animate xlink:href="#line4" attributeName="y2" from="58" to="51.9" begin="Layer_1.click" dur="3s" class="ani" />
</g>
<g>
<ellipse class="st4" id="elli1" cx="210.1" cy="344.8" rx="37.2" ry="4.5"/>
<animate xlink:href="#elli1" attributeName="rx" from="7.2" to="37.2" begin="Layer_1.click" dur="3s" class="ani" />
<animate xlink:href="#elli1" attributeName="ry" from="0.2" to="4.5" begin="Layer_1.click" dur="3s" class="ani" />
<g id="box1" transform="translate(0, 0)">
<polygon class="st5" points="230.8,307.5 213,307.5 213,307.9 213,314.1 207,314.1 207,307.5 189.2,307.5 188.9,345.4 231.2,345.4
"/>
<path class="st6" d="M207,307.3v-6.9c0-0.2,6-0.1,6-0.1v7.1h17.8l-8-7.1h-26.7l-7,7.1H207V307.3z"/>
<polygon class="st7" points="207,314.1 213,314.1 213,307.9 213,307.5 207,307.5 "/>
<path class="st8" d="M207,300.4v6.9v0.1h6v-7.1C213,300.4,207,300.2,207,300.4z"/>
<animateTransform xlink:href="#box1" attributeName="transform" type="translate" from="0 -70" to="0 0" begin="Layer_1.click" dur="3s" class="ani" />
</g>
</g>
</svg>
</div>

How to center an SVG element based on another element using js?

I made an SVG face and want to center each pupil in their respective eye.
I tried doing this by getting the center of the eye using getBoundingClientRect(). However when I set the position of the pupil this way it didn't work as expected (it did not center, and changes location based on size of page).
I'm guessing getBoundingClientRect() is related to a global position and the cx, cy attributes are local, but it's not clear to me what the attributes are local to or how I would fix it
Any ideas why this doesn't work and what approach might fix it?
Code
// Center the pupil in the eye. Side param is "left" or "right"
function center_pupil(side) {
let eye = document.querySelector(`#${side}-eye`).getBoundingClientRect()
let pupil = document.querySelector(`#${side}-pupil`)
let pupil_radius = pupil.getAttribute("r")
pupil.setAttribute("cx", eye.left + eye.width / 2 - pupil_radius)
pupil.setAttribute("cy", eye.top + eye.height / 2 - pupil_radius)
}
center_pupil("left")
center_pupil("right")
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 645.72 579.45">
<defs>
<clipPath id="clip-path" transform="translate(-114.91 -242.55)">
<path d="M544,377s9-21,54-25c0,0,114-7,150,25s-43,86-43,86-33.77,18.6-79.06,11.62C615.11,473,587.67,468.87,563,448c-10.53-8.91-25.76-21.79-27-42C535.2,393.05,540.49,382.61,544,377Z"
fill="none" />
</clipPath>
<clipPath id="clip-path-2" transform="translate(-114.91 -242.55)">
<path d="M117.5,397.5a38.69,38.69,0,0,1,8-11c6.89-6.57,14.55-8.78,19-10,32.47-8.93,45-10,45-10,34.68-2.95,53.54-4.56,81-1,33.83,4.38,50.79,6.54,61,21,13.58,19.24,5,45.13,4,48-6.94,20.08-23.19,30.46-35,38a106,106,0,0,1-29.07,12.82,108,108,0,0,1-39.93,3.18c-4.63.72-54.1,7.55-88.32-28.91C120.39,435.31,117.91,406.25,117.5,397.5Z"
fill="none" />
</clipPath>
</defs>
<title>face</title>
<g id="eyes">
<g id="right-eye">
<path d="M540.89,375.37A28.23,28.23,0,0,1,548.4,367a24,24,0,0,1,2.19-1.6c.76-.5,1.5-1,2.26-1.48,1.56-.86,3.07-1.81,4.67-2.55s3.14-1.57,4.76-2.23c.8-.34,1.6-.69,2.39-1.06l2.42-.94c.81-.31,1.61-.65,2.42-1s1.64-.56,2.46-.85l2.46-.81a25.18,25.18,0,0,1,2.49-.73c1.68-.43,3.34-.91,5-1.36s3.38-.71,5.07-1.07l2.54-.55,2.56-.41,5.14-.82c1.81-.26,3.45-.36,5.17-.53l5.12-.43q5.12-.4,10.23-.65a289.41,289.41,0,0,1,41,.71c6.82.65,13.62,1.57,20.39,2.63s13.51,2.37,20.23,3.71,13.41,2.9,20.15,4.54c1.69.38,3.36.86,5,1.36l2.51.73c.83.26,1.65.58,2.48.87l2.47.9c.82.3,1.61.71,2.42,1.05a49,49,0,0,1,4.78,2.33,52.84,52.84,0,0,1,4.63,2.72l2.26,1.48c.75.49,1.44,1.12,2.16,1.68l2.12,1.72c.67.65,1.37,1.27,2,2a30,30,0,0,1,3.57,4.42c.57.78,1,1.65,1.5,2.47s.88,1.73,1.21,2.64a25.41,25.41,0,0,1,1.57,5.59,29.78,29.78,0,0,1-.37,11.31c-4.58,14.09-13,25.18-22.33,35.35a178.89,178.89,0,0,1-14.84,14.31q-3.88,3.39-8,6.53c-2.72,2.11-5.44,4.15-8.32,6.15l-.11.08-.1.05c-2.33,1.23-4.54,2.18-6.86,3.13s-4.62,1.77-7,2.58c-4.68,1.57-9.43,2.87-14.23,4a151.83,151.83,0,0,1-29.28,3.67c-2.46,0-4.93.12-7.39.07l-7.41-.31-7.38-.71c-2.46-.23-4.85-.58-7.3-.93a131.55,131.55,0,0,1-28.88-7.35,114.07,114.07,0,0,1-13.69-6.28c-2.25-1.13-4.38-2.49-6.55-3.78-1.08-.65-2.09-1.41-3.14-2.11s-2.12-1.4-3.1-2.19a143.74,143.74,0,0,1-11.34-9.74,83.58,83.58,0,0,1-10.05-11.51A57.13,57.13,0,0,1,535.46,420a53.51,53.51,0,0,1-2.89-15.38,48.4,48.4,0,0,1,2-15.44,50,50,0,0,1,2.7-7.28c.54-1.17,1.12-2.32,1.76-3.44.31-.56.64-1.11,1-1.65S540.59,375.83,540.89,375.37Zm6.22,3.26c-.75,1.3-1.25,2.21-1.77,3.23s-1,2-1.52,3a56.3,56.3,0,0,0-2.49,6.29,41.51,41.51,0,0,0-2,13.2,34.3,34.3,0,0,0,2.84,12.95,45.72,45.72,0,0,0,7.15,11.32,91.37,91.37,0,0,0,9.77,9.7c3.46,3.07,7.29,6.18,10.83,9a112.56,112.56,0,0,0,23.73,14.54,121.21,121.21,0,0,0,13.15,5,135,135,0,0,0,13.72,3.63c2.31.47,4.7,1,7,1.32s4.69.73,7,1l7.1.56c2.37.13,4.75.12,7.13.18a128.42,128.42,0,0,0,28.29-3.39,135,135,0,0,0,13.69-4c2.23-.81,4.46-1.64,6.63-2.57s4.39-1.91,6.33-3l-.21.13c5.43-3.8,10.71-8.06,15.86-12.34s10.1-8.85,14.78-13.63a103.24,103.24,0,0,0,12.64-15.43,47.41,47.41,0,0,0,4.69-8.65,40.34,40.34,0,0,0,2.28-9.25,33.29,33.29,0,0,0,.35-4.54,22.19,22.19,0,0,0-.46-4.4,20.11,20.11,0,0,0-1.34-4.15c-.25-.67-.64-1.3-1-1.95s-.74-1.27-1.2-1.86a29.21,29.21,0,0,0-6.38-6.48c-.62-.47-1.2-1-1.86-1.44l-2-1.34a46,46,0,0,0-4.12-2.49c-11.39-6-24.05-11.23-37.37-13.24-13.25-2.37-26.77-3-40.22-3.48s-26.92-1-40.43-1.38l-10.13-.24-5.07-.07c-1.66,0-3.42,0-5,0a108.23,108.23,0,0,0-19.78,2.72,24.43,24.43,0,0,0-2.41.65l-2.39.72a43.68,43.68,0,0,0-4.71,1.63c-.77.32-1.55.6-2.3.94s-1.48.75-2.21,1.14-1.47.74-2.17,1.18l-2.06,1.35-1,.68c-.33.24-.64.51-1,.76l-1.9,1.53c-.6.54-1.18,1.11-1.76,1.65a20.72,20.72,0,0,0-1.67,1.71c-.54.58-1.07,1.17-1.54,1.78a21.79,21.79,0,0,0-1.41,1.83l-.66.93-.59.93c-.21.31-.34.62-.52.93-.09.15-.15.29-.22.43Z"
transform="translate(-114.91 -242.55)" />
</g>
<path d="M505,327" transform="translate(-114.91 -242.55)" />
<g id="left-eye">
<path d="M114.91,397a8.77,8.77,0,0,1,.41-1.29c.07-.21.14-.43.22-.65.15-.43.33-.85.52-1.27a23.67,23.67,0,0,1,1.3-2.43,33.63,33.63,0,0,1,3.35-4.38,39.68,39.68,0,0,1,8.37-7.14,45.38,45.38,0,0,1,9.88-4.59c3.45-1.11,6.75-1.8,10-2.64,6.64-1.59,13.29-3.11,20-4.49,3.35-.68,6.71-1.32,10.08-1.9,1.69-.29,3.38-.58,5.08-.84l2.56-.36,1.29-.16.66-.08.33,0,.17,0,.34,0h-.15l10-.79c3.36-.27,6.71-.48,10.05-1s6.66-1.26,10-1.68,6.74-.55,10.13-.72c6.78-.27,13.6-.4,20.41-.06s13.6.93,20.33,1.86,13.33,1.84,20,2.91a156,156,0,0,1,20.08,4.29c.83.26,1.66.55,2.49.83s1.65.56,2.47.91l2.45,1,2.4,1.19a37.88,37.88,0,0,1,8.79,6.29,39.43,39.43,0,0,1,6.43,8.62,19,19,0,0,1,1.21,2.38l1.11,2.43.86,2.52a18.46,18.46,0,0,1,.77,2.53,57.7,57.7,0,0,1,1.39,20.78,77.82,77.82,0,0,1-1.71,10.2c-.41,1.68-.84,3.35-1.38,5s-1.2,3.27-1.82,4.9a80.14,80.14,0,0,1-10.73,18l-.83,1-.87,1c-.6.64-1.17,1.32-1.79,1.94-1.24,1.23-2.49,2.46-3.82,3.59a93.34,93.34,0,0,1-8.31,6.24c-1.42.95-2.85,1.9-4.28,2.81s-2.82,1.81-4.32,2.74q-4.45,2.71-9.14,5a111.57,111.57,0,0,1-19.45,7.27,109.85,109.85,0,0,1-41.18,3l.81,0a96.63,96.63,0,0,1-10.64.84c-3.53.09-7.06,0-10.58-.18a118,118,0,0,1-20.88-3.16A104.42,104.42,0,0,1,170,482a97.9,97.9,0,0,1-18-11.15,94.11,94.11,0,0,1-26.21-32.74,104.55,104.55,0,0,1-7.36-19.73q-1.36-5.09-2.24-10.3c-.28-1.74-.57-3.48-.77-5.23-.12-.87-.2-1.75-.29-2.63l-.07-.66-.07-.86C114.94,398.15,114.92,397.55,114.91,397Zm5.18,1.08a7,7,0,0,1,.08.79l0,1.06c.05.83.09,1.67.17,2.5.11,1.68.31,3.34.51,5,.46,3.33,1.1,6.63,1.88,9.91.39,1.63.86,3.25,1.32,4.86s1,3.21,1.62,4.78c1.17,3.15,2.48,6.25,4,9.27a87.88,87.88,0,0,0,42.45,41.16,99.57,99.57,0,0,0,19,6.34,112.17,112.17,0,0,0,19.92,2.62c3.35.14,6.71.15,10.05,0a89,89,0,0,0,9.9-.94l.38-.06.43,0a105.31,105.31,0,0,0,19.53.1A110.47,110.47,0,0,0,270.55,482a104.55,104.55,0,0,0,18.21-6.92,96.58,96.58,0,0,0,8.52-4.71c1.36-.84,2.79-1.77,4.18-2.67s2.76-1.83,4.12-2.75c2.72-1.85,5.3-3.82,7.85-5.8s5-4,7.4-6.21a51.27,51.27,0,0,0,6.53-7.12,42.86,42.86,0,0,0,4.84-8.38,61.67,61.67,0,0,0,4.57-18.91,52.32,52.32,0,0,0-1.7-19.18,18.18,18.18,0,0,0-.76-2.26l-.84-2.22-1.06-2.12a16.05,16.05,0,0,0-1.13-2.08,35,35,0,0,0-5.82-7.29,34.22,34.22,0,0,0-7.68-5.19l-2.14-1-2.23-.86c-.73-.3-1.5-.55-2.27-.78s-1.53-.49-2.31-.71a160.49,160.49,0,0,0-19.39-3.74c-6.59-.93-13.26-1.73-19.92-2.52a264.5,264.5,0,0,0-39.7-1.74c-3.33.07-6.65.33-10,.27s-6.72-.28-10.08-.29a96.26,96.26,0,0,0-10.05.57l-10,.9h-.16l-2.26.33-2.48.41c-1.65.29-3.3.61-4.95.95-3.3.7-6.59,1.48-9.87,2.28-6.56,1.62-13.08,3.42-19.58,5.32-3.23,1-6.56,1.86-9.53,3a39,39,0,0,0-8.42,4.28,34.43,34.43,0,0,0-6.92,6.22,46.51,46.51,0,0,0-2.8,3.73l-1.37,1.92-.7,1-.37.48A.39.39,0,0,0,120.09,398Z"
transform="translate(-114.91 -242.55)" />
</g>
</g>
<g clip-path="url(#clip-path)">
<circle id="right-pupil" cx="532.09" cy="125.45" r="31" />
</g>
<g clip-path="url(#clip-path-2)">
<circle id="left-pupil" cx="116.59" cy="139.95" r="31" />
</g>
<g id="Layer_4" data-name="Layer 4">
<path d="M505,264s120-29,194-10" transform="translate(-114.91 -242.55)" fill="none" stroke="#000"
stroke-miterlimit="10" stroke-width="10" />
<path d="M154,280s116-27,179,0" transform="translate(-114.91 -242.55)" fill="none" stroke="#000"
stroke-miterlimit="10" stroke-width="10" />
<path d="M390,401c9.15,143.49,6.63,190.63,2,205,0,0-6.53,20.28-2,41a35.35,35.35,0,0,0,4,10s1.3,2.14,8,10"
transform="translate(-114.91 -242.55)" fill="none" stroke="#000" stroke-miterlimit="10"
stroke-width="10" />
<line x1="321.09" y1="415.45" x2="329.09" y2="424.45" fill="none" stroke="#000" stroke-miterlimit="10"
stroke-width="10" />
<path d="M363,774l146-4s-1,47-73,47S363,774,363,774Z" transform="translate(-114.91 -242.55)" fill="none"
stroke="#000" stroke-miterlimit="10" stroke-width="10" />
</g>
</svg>
What I'm currently seeing
Note: pupil location changes based on screen size

Alpha numeric detection from .svg image

Was wondering if anyone ran into a problem similar to mine and had some sort of solution they could share.
I have a .svg that looks somewhat like the below image.
My goal is to extract the ID "1214A" and any other unique ID's in the similar format from this .svg image. (only showed a sample of the image, there are other ID's in the image with the ID being inside that oval shape as well.)
Below is what the .svg looks like.
http://jsfiddle.net/rayshinn/1wgob3qu/
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="692px" height="924px" viewBox="0 0 692 924" overflow="inherit" xml:space="preserve">
<rect x="352.62" y="456.78" fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="10.2" height="8.159"/>
<path fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M362.82,456.78"/>
<polyline fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
352.62,464.939 362.82,464.939 352.62,471.061 352.62,464.939 362.82,471.061 352.62,471.061 "/>
<polygon fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
355.5,453.42 355.5,456.78 362.82,456.78 362.82,440.46 346.5,440.46 346.5,447.78 349.859,447.78 "/>
<rect x="325.26" y="475.02" fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="8.88" height="8.762"/>
<rect x="362.82" y="456.78" fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="0.84" height="14.279"/>
<path fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M362.82,471.061"/>
<rect x="362.82" y="440.46" fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="0.84" height="16.32"/>
<path fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M362.82,456.78"/>
<line fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="362.82" y1="471.061" x2="362.82" y2="464.939"/>
<rect x="362.82" y="440.46" fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="4.08" height="23.28"/>
<path fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M366.9,463.74"/>
<polyline fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
345.78,452.82 346.26,452.82 346.5,453.06 346.62,453.3 346.5,453.54 "/>
<line fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="345.78" y1="452.82" x2="343.38" y2="455.34"/>
<polyline fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
343.38,455.82 343.26,455.58 343.38,455.34 "/>
<line fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="343.38" y1="455.82" x2="343.62" y2="456.06"/>
<polyline fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
346.5,453.54 344.1,456.06 343.86,456.18 343.62,456.06 "/>
<line fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="346.5" y1="453.06" x2="346.98" y2="453.06"/>
<polyline fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
344.46,459.18 343.5,457.86 343.02,456.42 "/>
<polyline fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
344.94,458.7 344.1,457.62 343.62,456.3 "/>
<polyline fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
346.98,453.06 347.58,453.3 349.26,454.5 "/>
<polyline fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
343.26,455.94 343.5,456.06 343.62,456.3 "/>
<polyline fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
343.02,456.42 343.02,456.06 343.26,455.94 "/>
<line fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="347.82" y1="460.5" x2="347.34" y2="460.74"/>
<polyline fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
347.46,460.02 347.7,460.14 347.82,460.5 "/>
<polyline fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
349.26,454.5 350.46,456.18 350.7,456.78 "/>
<polyline fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
347.46,460.02 346.14,459.66 344.94,458.7 "/>
<polyline fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
347.34,460.74 345.78,460.26 344.46,459.18 "/>
<line fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="350.7" y1="456.78" x2="350.7" y2="457.26"/>
<polyline fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
347.7,460.14 347.58,459.9 347.7,459.66 350.1,457.26 "/>
<line fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="347.939" y1="460.38" x2="347.7" y2="460.14"/>
<polyline fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
348.42,460.38 348.18,460.5 347.939,460.38 "/>
<line fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="350.82" y1="457.98" x2="348.42" y2="460.38"/>
<polyline fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
350.1,457.26 350.34,457.14 350.58,457.26 350.82,457.5 350.939,457.74 350.82,457.98 "/>
<polygon fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
346.86,448.14 346.86,451.02 352.26,456.42 355.141,456.42 355.141,453.54 349.74,448.14 "/>
<polyline fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
334.14,483.78 338.58,483.78 338.34,482.46 337.74,481.26 336.78,480.3 335.46,479.58 334.14,479.34 335.46,479.22 336.78,478.5
337.74,477.54 338.34,476.34 338.58,475.02 334.14,475.02 "/>
<rect x="325.26" y="462.78" fill="none" stroke="#010101" stroke-width="0.36" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="6.12" height="12.238"/>
<line fill="none" stroke="#BBBBBB" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="330.18" y1="472.5" x2="331.38" y2="475.02"/>
<line fill="none" stroke="#010101" stroke-width="0.36" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="331.74" y1="471.54" x2="331.74" y2="465.78"/>
<path fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M348.779,461.94h0.36l0.119,0.119h0.12v0.12h0.12c0.596,0.552-0.116,0.049,0.479,0.601v0.12h0.119v0.24l0.121,0.119v0.12h0.119v0.24
l0.12,0.12v0.119l0.12,0.12v0.24l0.12,0.119v0.36l0.12,0.12v0.239l0.118,0.119v0.48l0.121,0.239v0.479l0.119,0.12v0.479l0.12,0.24
v0.84l0.12,0.119v0.36c0,0.521,0,1.04,0,1.56v1.08c0,0.44,0,0.881,0,1.32v0.358l-0.12,0.121v0.959l-0.12,0.121v0.479l-0.119,0.239
v0.479l-0.121,0.12v0.479l-0.118,0.119v0.24l-0.12,0.24v0.239l-0.12,0.119v0.24l-0.12,0.121v0.119l-0.12,0.12v0.239l-0.119,0.12
v0.119H350.1v0.24l-0.239,0.24v0.121h-0.119v0.119l-0.36,0.36h-0.12v0.119h-0.239l-0.119,0.121h-0.36V479.1h-0.24v-0.118h-0.12
l-0.6-0.602v-0.12l-0.12-0.119v-0.121l-0.239-0.238v-0.24l-0.12-0.12v-0.24l-0.12-0.118v-0.121l-0.12-0.119v-0.24l-0.12-0.12v-0.359
l-0.12-0.119v-0.48l-0.12-0.12V474.9l-0.12-0.121V474.3l-0.12-0.239v-0.841l-0.119-0.239v-1.561l-0.12-0.24v-1.319l0.12-0.119
v-1.681l0.119-0.239v-0.12c-0.065-1.05,0.167-0.518,0.12-1.32l0.12-0.239v-0.479l0.12-0.12v-0.479l0.12-0.12V464.7l0.12-0.12v-0.36
l0.12-0.12v-0.118l0.12-0.121v-0.239l0.12-0.12v-0.12l0.119-0.12v-0.119l0.12-0.12v-0.12h0.12v-0.24h0.12v-0.12l0.36-0.36h0.118
v-0.119h0.12v-0.12L348.779,461.94"/>
<polyline fill="#010101" points="349.62,465.3 349.62,465.061 349.141,465.061 349.26,465.061 349.26,465.3 349.38,465.3
349.38,465.54 349.5,465.54 349.5,465.66 349.62,465.66 349.62,465.78 "/>
<polyline fill="#010101" points="350.221,466.141 350.221,465.78 350.1,465.78 349.74,465.42 349.74,465.3 349.62,465.3
349.62,465.78 347.34,465.78 347.34,466.141 "/>
<path fill="#010101" d="M349.98,468.78v-0.841v0.239l-0.121,0.12v0.12h-0.119v0.12h-0.48l-0.119-0.12h-0.121v-0.12H348.9v-0.12
h-0.121v-0.119h-0.119v-0.12h-0.12v-0.119c-0.2-0.2-0.399-0.4-0.601-0.602h-0.119v-0.12h-0.12l-0.12-0.118h-0.24v1.92h0.36v-1.44
v0.12h0.12l0.239,0.24l0.119,0.119l0.12,0.12v0.119h0.12v0.12h0.12v0.12h0.12v0.12l0.119,0.12h0.121v0.12h0.239v0.12h0.601
l0.119-0.12"/>
<polyline fill="#010101" points="350.221,467.939 350.221,467.58 350.1,467.46 350.1,467.34 349.98,467.34 349.98,467.22
349.859,467.22 349.74,467.1 349.38,467.1 349.38,467.46 349.74,467.46 349.74,467.58 349.859,467.58 349.859,467.7 349.98,467.7
349.98,468.78 349.98,468.66 350.1,468.66 350.1,468.54 350.221,468.54 350.221,468.061 "/>
<polyline fill="#010101" points="349.62,469.859 349.62,469.62 349.141,469.62 349.26,469.62 349.26,469.859 349.38,469.859
349.38,470.1 349.5,470.1 349.5,470.22 349.62,470.22 349.62,470.34 "/>
<polyline fill="#010101" points="350.221,470.7 350.221,470.34 350.1,470.34 349.98,470.22 349.859,470.1 349.74,469.98
349.74,469.859 349.62,469.859 349.62,470.34 347.34,470.34 347.34,470.7 "/>
<polyline fill="#010101" points="350.221,473.1 350.221,472.859 348.42,471.42 348.061,471.42 348.061,472.74 347.34,472.74
347.34,473.1 348.061,473.1 348.061,473.46 348.42,473.46 348.42,471.78 349.74,472.74 "/>
<polyline fill="#010101" points="350.221,473.1 349.74,472.74 348.42,472.74 348.42,471.78 348.42,473.1 "/>
<polyline fill="#010101" points="350.221,475.26 350.221,474.78 347.34,473.7 347.34,474.061 348.18,474.42 348.18,475.62
348.54,474.54 349.38,474.9 349.74,474.9 349.74,475.02 349.98,475.02 "/>
<polyline fill="#010101" points="350.221,475.26 349.98,475.02 349.74,475.02 349.74,475.141 349.5,475.141 349.38,475.26
348.54,475.5 348.54,474.54 348.18,475.62 347.34,475.98 347.34,476.46 "/>
</svg>
This .svg image was autogenerated by using the export feature Adobe Illustrator from PDF to .svg.
Is there a way to extract the ID in this picture using Javascript and store it in to some array?
Thank you for reading, any starting points or any sort of help would be very much appreciated!

As #austin-mullins suggests, it could be that the PDF contains the original text, which would be easier to extract. However this sample looks like it originates from a CAD drawing, so I suspect it probably doesn't.
Another approach would be to recognise characters from their definitions. For example the digit "1" (at 90 degrees) is the following element:
<polyline fill="#010101"
points="350.221,466.141 350.221,465.78 350.1,465.78 349.74,465.42
349.74,465.3 349.62,465.3 349.62,465.78 347.34,465.78
347.34,466.141"></polyline>
If you subtract the initial point (350.221,466.141) from each set of coords in the polyline, you should be able to recognise other "1" characters in the document. At least those at 90 degrees.
That should work for the whole document. And the extracted character templates may even work for other documents if you need to do that.

Categories

Resources