0

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"

Buzz Su
  • 47
  • 5
  • Welcome to Stack Overflow. Please provide a [mcve]. It is also not clear if you mean the position in the document, the SVG, the window... please be more specific. – Twisty Jan 30 '23 at 06:27
  • @Twisty, hello, well, what I meant was just highlight the number "91" in the svg which I really intend to do, so the first step would be to find the position of the number :) – Buzz Su Jan 30 '23 at 06:30
  • Why not just style the background of the Text object inside the SVG? You're asking X to solve for Y. – Twisty Jan 30 '23 at 06:33
  • @Well, the text has to be in SVG because the file that my company gives are drawings with words in a pdf which I convert it to svg because svg has a good image quality when zoomed in :) – Buzz Su Jan 30 '23 at 06:35
  • The text and drawings are all embeded together inside the SVG :) – Buzz Su Jan 30 '23 at 06:37
  • That's fine, you can still style the object of the SVG: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text – Twisty Jan 30 '23 at 06:38
  • @Twisty, hi, I believe the link you gave me does not have words embeded into the SVG, instead they just write the text and paste SVG image as background. My SVG has both background image and text embeded together which I will need to extract the text from it :) – Buzz Su Jan 30 '23 at 06:41
  • If you see my demo https://codepen.io/Maximusssssu/pen/dyjjjJQ, I don't hardcode the numbers into the image, instead the image comes together with the numbers in a SVG image format :) – Buzz Su Jan 30 '23 at 06:44
  • Your CodePen uses the same `` element in the SVG: `39` Your example code does not show any "embedded" elements. – Twisty Jan 30 '23 at 06:45
  • This might help you: https://stackoverflow.com/questions/15500894/background-color-of-text-in-svg – Twisty Jan 30 '23 at 06:55
  • Please provide enough code so others can better understand or reproduce the problem. – Community Jan 30 '23 at 07:56

1 Answers1

1

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/

Twisty
  • 30,304
  • 2
  • 26
  • 45