Extract text position from SVG Image-CodePudding

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"
CodePudding user response：
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/