Home > Back-end >  How to make all objects in a group (inclluding text) in an SVG act as a single object when selecting
How to make all objects in a group (inclluding text) in an SVG act as a single object when selecting

Time:11-28

I am trying to make a responsive image map with svg and d3.js, but one thing I haven't been able to figure out is how to make entire groups respond to clicks as a single object. As a test, I have made several objects grouped with their text labels and placed them such that their bounding boxes overlap.

As it is now, clicking on the text labels inside the group does not select the group, nor does clicking the path inside the text's bounding box. How can I get it so that clicking with in the paths or text of an object selects that entire group, regardless of which group member I clicked on?

Here is what I have so far, you can test it on codePen:

https://codepen.io/AwakeAntelope/pen/MWXXzRy

select_test.js

var links = d3.selectAll('path');

var arr = [
];

var test = {};

function displayName(name) {
    document.getElementById('object-name').firstChild.data = name;
    console.log(d3.select(this));
    console.log(name);
    console.log(arr);
}

links.attr("class","links");


links.on("click", function(d){
    if (!d3.select(this.closest('.object')).classed("selected") ){
   d3.select(this.closest('.object')).classed("selected", true);
     test[d3.select(this.closest('.object')).attr("id")] = $(this).css("fill");
     d3.select(this).style("fill", "rgb(10, 10, 10)");
     console.log(d3.select(this.closest('.object')).attr("id"))
     arr.push(d3.select(this.closest('.object')).attr("id"))
  }else{
  console.log(test);
   d3.select(this.closest('.object')).classed("selected", false);
   // d3.select(this).style("fill", "red");
   d3.select(this).style("fill", test[d3.select(this.closest('.object')).attr("id")]);
   var index = arr.indexOf(d3.select(this.closest('.object')).attr("id"));
   if (index >= 0) {
       arr.splice( index, 1 );
   }
    }
    document.getElementById("object-list").innerHTML = arr;
  }
 );

svg embedded in html:

<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='utf-8'/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="pagebox">
<div id="pagetext">
<script src="https://d3js.org/d3.v7.min.js"></script>
<center><h3>Select the objects by clicking on them. Clicking the text labels does not work. Each text label is grouped with its object. How can I make it so that clicking any object within the group will select the group?</h3></center>

<!-- <?xml version="1.0" encoding="UTF-8" standalone="no"?> -->
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<div>
<svg
   width="300mm"
   height="300mm"
   viewBox="0 0 300 300"
   version="1.1"
   id="svg5"
   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
   sodipodi:docname="simpletest.svg"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <style
     type="text/css"
     id="style6478">
     .object {
     }
    .object:hover path{
    filter: invert(25%);
    }
    .object:hover text{
    stroke: red !important;
    }
  </style>
  <sodipodi:namedview
     id="namedview7"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageshadow="2"
     inkscape:pageopacity="0.0"
     inkscape:pagecheckerboard="0"
     inkscape:document-units="mm"
     showgrid="false"
     inkscape:zoom="0.77771465"
     inkscape:cx="415.31943"
     inkscape:cy="560.61693"
     inkscape:window-width="2560"
     inkscape:window-height="1367"
     inkscape:window-x="0"
     inkscape:window-y="0"
     inkscape:window-maximized="1"
     inkscape:current-layer="layer1" />
  <defs
     id="defs2">
    <filter
       inkscape:collect="always"
       style="color-interpolation-filters:sRGB"
       id="filter23362"
       x="-0.21715227"
       y="-0.33301318"
       width="1.4343045"
       height="1.6660264">
      <feGaussianBlur
         inkscape:collect="always"
         stdDeviation="2.8947016"
         id="feGaussianBlur23364" />
    </filter>
    <filter
       inkscape:collect="always"
       style="color-interpolation-filters:sRGB"
       id="filter23366"
       x="-0.10409501"
       y="-0.41750906"
       width="1.20819"
       height="1.8350181">
      <feGaussianBlur
         inkscape:collect="always"
         stdDeviation="2.8947016"
         id="feGaussianBlur23368" />
    </filter>
    <filter
       inkscape:collect="always"
       style="color-interpolation-filters:sRGB"
       id="filter23370"
       x="-0.077371133"
       y="-0.32769348"
       width="1.1547423"
       height="1.655387">
      <feGaussianBlur
         inkscape:collect="always"
         stdDeviation="2.8947016"
         id="feGaussianBlur23372" />
    </filter>
    <filter
       inkscape:collect="always"
       style="color-interpolation-filters:sRGB"
       id="filter23374"
       x="-0.087590236"
       y="-0.40918108"
       width="1.1751805"
       height="1.8183622">
      <feGaussianBlur
         inkscape:collect="always"
         stdDeviation="2.8947016"
         id="feGaussianBlur23376" />
    </filter>
    <filter
       inkscape:collect="always"
       style="color-interpolation-filters:sRGB"
       id="filter23378"
       x="-0.081836401"
       y="-0.41750906"
       width="1.1636728"
       height="1.8350181">
      <feGaussianBlur
         inkscape:collect="always"
         stdDeviation="2.8947016"
         id="feGaussianBlur23380" />
    </filter>
    <filter
       inkscape:collect="always"
       style="color-interpolation-filters:sRGB"
       id="filter23382"
       x="-0.16101779"
       y="-0.33301318"
       width="1.3220356"
       height="1.6660264">
      <feGaussianBlur
         inkscape:collect="always"
         stdDeviation="2.8947016"
         id="feGaussianBlur23384" />
    </filter>
  </defs>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1">
    <g
       id="UP"
       
       transform="translate(11.563771,-64.681805)">
      <path
         sodipodi:type="star"
         style="fill:#00ffff"
         id="path1672"
         inkscape:flatsided="false"
         sodipodi:sides="7"
         sodipodi:cx="523.42645"
         sodipodi:cy="217.09364"
         sodipodi:r1="86.442635"
         sodipodi:r2="14.696225"
         sodipodi:arg1="0.8123193"
         sodipodi:arg2="0.28780638"
         inkscape:rounded="0.448574"
         inkscape:randomized="0"
         d="m 582.88314,279.841 c 5.35083,32.8006 -13.71042,-68.70018 -45.36493,-58.57584 -36.53429,11.68508 -0.33162,53.0041 -26.07898,81.43593 -22.30835,24.63429 45.16366,-53.5531 17.51186,-71.98917 -31.91452,-21.27813 -41.64703,32.78824 -79.92915,30.38511 -33.16889,-2.08215 70.02858,1.92055 67.20187,-31.19319 -3.26246,-38.21848 -51.60138,-12.11783 -73.59104,-43.54632 -19.05258,-27.23068 42.16055,55.94799 66.2875,33.0919 27.84629,-26.37953 -22.69884,-47.89893 -11.83739,-84.68648 9.41072,-31.87396 -17.45522,67.84545 15.4573,72.45811 37.98622,5.32374 23.29639,-47.61115 58.83007,-62.056 30.78754,-12.51548 -63.92687,28.65391 -47.01258,57.2619 19.52176,33.01812 51.74897,-11.47122 85.19728,7.30392 28.98073,16.26739 -62.26027,-32.11462 -74.08101,-1.0537 -13.64299,35.84918 41.23351,33.30678 47.4092,71.16383 z"
         transform="matrix(0.42663437,0,0,0.41124782,-106.21075,162.18301)" />
      <g
         id="g23618"
         transform="translate(250.26312,180.71417)">
        <text
           xml:space="preserve"
           style="font-style:normal;font-weight:normal;font-size:10.5833px;line-height:1.25;font-family:sans-serif;fill:#808080;fill-opacity:1;stroke:none;stroke-width:0.264583;filter:url(#filter23362)"
           x="-150.91611"
           y="75.8302"
           id="text3760"><tspan
             sodipodi:role="line"
             id="tspan3758"
             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:22.5778px;font-family:C059;-inkscape-font-specification:'C059, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#808080;stroke-width:0.264583"
             x="-150.91611"
             y="75.8302">Up</tspan></text>
        <text
           xml:space="preserve"
           style="font-style:normal;font-weight:normal;font-size:10.5833px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
           x="-150.91611"
           y="75.8302"
           id="text23504"><tspan
             sodipodi:role="line"
             id="tspan23502"
             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:22.5778px;font-family:C059;-inkscape-font-specification:'C059, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;stroke-width:0.264583"
             x="-150.91611"
             y="75.8302">Up</tspan></text>
      </g>
    </g>
    <g
       id="DOWN"
       
       transform="translate(-62.762975,13.141356)">
      <path
         sodipodi:type="star"
         style="fill:#ff00ff"
         id="path1060"
         inkscape:flatsided="false"
         sodipodi:sides="6"
         sodipodi:cx="845.16614"
         sodipodi:cy="231.4547"
         sodipodi:r1="149.04474"
         sodipodi:r2="41.035686"
         sodipodi:arg1="1.0517739"
         sodipodi:arg2="1.5753727"
         inkscape:rounded="0.29895484"
         inkscape:randomized="0.076959846"
         d="m 916.15407,349.81596 c -32.84226,13.97841 -27.08989,-79.14993 -60.70658,-81.40101 -33.61668,-2.25108 -64.96689,118.49599 -96.04802,102.81497 -31.08114,-15.68103 73.65724,-99.57555 56.66469,-129.52175 -16.99255,-29.9462 -121.05415,17.51758 -125.10914,-17.88352 -4.055,-35.4011 100.43851,19.43601 116.97024,-10.44889 16.53173,-29.8849 -61.18096,-87.98233 -30.86975,-105.44935 30.31121,-17.467024 28.64471,86.76374 64.12971,85.50885 35.485,-1.25488 37.79764,-98.293706 69.66072,-83.42358 31.86309,14.87012 -50.12489,77.99806 -33.70016,108.56265 16.42474,30.56459 125.33442,-29.46863 123.84882,5.31301 -1.48563,34.78165 -95.91495,-5.55885 -115.73353,21.03757 -19.81858,26.59642 63.73525,90.91264 30.893,104.89105 z"
         transform="matrix(0.22674491,0,0,0.2279117,8.7005744,39.372945)"
         inkscape:transform-center-x="6.2351939e-06" />
      <g
         id="g23624"
         transform="translate(333.00775,-26.494491)">
        <text
           xml:space="preserve"
           style="font-style:normal;font-weight:normal;font-size:10.5833px;line-height:1.25;font-family:sans-serif;fill:#808080;fill-opacity:1;stroke:none;stroke-width:0.264583;filter:url(#filter23366)"
           x="-164.48285"
           y="124.53662"
           id="text3760-0"><tspan
             sodipodi:role="line"
             id="tspan3758-8"
             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:22.5778px;font-family:C059;-inkscape-font-specification:'C059, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#808080;stroke-width:0.264583"
             x="-164.48285"
             y="124.53662">Down</tspan></text>
        <text
           xml:space="preserve"
           style="font-style:normal;font-weight:normal;font-size:10.5833px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
           x="-164.48285"
           y="124.53662"
           id="text23508"><tspan
             sodipodi:role="line"
             id="tspan23506"
             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:22.5778px;font-family:C059;-inkscape-font-specification:'C059, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;stroke-width:0.264583"
             x="-164.48285"
             y="124.53662">Down</tspan></text>
      </g>
    </g>
    <g
       id="STRANGE"
       
       transform="translate(34.763054,15.984447)">
      <path
         sodipodi:type="star"
         style="fill:#ffcc00"
         id="path846"
         inkscape:flatsided="false"
         sodipodi:sides="5"
         sodipodi:cx="397.02145"
         sodipodi:cy="296.07111"
         sodipodi:r1="150.17648"
         sodipodi:r2="51.75964"
         sodipodi:arg1="-0.011353076"
         sodipodi:arg2="1.3523548"
         inkscape:rounded="-2.0740482"
         inkscape:randomized="0"
         d="M 547.18826,294.36618 C 751.36441,63.927525 230.19766,597.78083 408.23821,346.60075 526.81863,179.30717 257.05722,356.45721 445.04703,438.36137 727.30111,561.33497 58.527063,230.64568 352.43107,322.35339 c 195.74902,61.08013 -56.09154,-140.73585 -75.89498,63.36287 -29.73353,306.44051 78.10812,-431.790019 81.71024,-123.93145 2.39912,205.04317 116.5145,-96.836 -83.71451,-52.60022 -300.63041,66.41706 434.79345,-59.14521 143.11567,39.41414 -194.26628,65.64352 128.10147,80.8879 24.15658,-95.87159 -156.06629,-265.39252 190.609,395.23626 6.7401,148.29072 -122.46229,-164.47325 -37.34344,146.82747 98.64409,-6.65168 z"
         transform="matrix(0.26458333,0,0,0.26458333,-57.748131,-20.89065)" />
      <g
         id="g23630"
         transform="translate(153.32697,-97.46846)">
        <text
           xml:space="preserve"
           style="font-style:normal;font-weight:normal;font-size:10.5833px;line-height:1.25;font-family:sans-serif;fill:#808080;fill-opacity:1;stroke:none;stroke-width:0.264583;filter:url(#filter23370)"
           x="-147.31439"
           y="156.24136"
           id="text3760-6"><tspan
             sodipodi:role="line"
             id="tspan3758-4"
             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:22.5778px;font-family:C059;-inkscape-font-specification:'C059, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#808080;stroke-width:0.264583"
             x="-147.31439"
             y="156.24136">Strange</tspan></text>
        <text
           xml:space="preserve"
           style="font-style:normal;font-weight:normal;font-size:10.5833px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
           x="-147.31439"
           y="156.24136"
           id="text23512"><tspan
             sodipodi:role="line"
             id="tspan23510"
             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:22.5778px;font-family:C059;-inkscape-font-specification:'C059, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;stroke-width:0.264583"
             x="-147.31439"
             y="156.24136">Strange</tspan></text>
      </g>
    </g>
    <g
       id="CHARM"
       
       transform="translate(-72.090177,24.95995)">
      <g
         id="g881">
        <path
           sodipodi:type="star"
           style="fill:#008000"
           id="path1444"
           inkscape:flatsided="false"
           sodipodi:sides="7"
           sodipodi:cx="347.50473"
           sodipodi:cy="542.39465"
           sodipodi:r1="154.38631"
           sodipodi:r2="72.512718"
           sodipodi:arg1="-0.032833585"
           sodipodi:arg2="-0.037963645"
           inkscape:rounded="0.27552922"
           inkscape:randomized="-0.33474631"
           d="m 533.76592,587.52958 c 1.36048,20.57658 -71.70394,-24.49015 -78.73751,-3.60336 -10.59931,31.47553 -23.36808,18.22802 -29.84139,47.17439 -4.29561,19.20848 -14.49448,-68.59702 -35.61571,-61.45505 -31.82881,10.76265 -17.313,156.63585 -48.12015,151.55082 -20.44327,-3.37436 4.2646,-115.12109 -15.50147,-130.16937 -29.78664,-22.67712 -73.84372,87.83809 -94.38722,66.65881 -13.63243,-14.05433 55.75354,-85.83803 50.76647,-105.02432 -7.51531,-28.91295 -44.81467,-64.23839 -35.3416,-101.5723 6.28622,-24.77436 21.00375,120.6931 33.03052,98.23825 18.12385,-33.83852 -23.81513,-160.20757 -0.2713,-182.71076 15.62342,-14.93286 20.60586,131.19413 46.66628,132.59932 39.27196,2.11755 135.72485,-56.1122 161.84488,-41.85051 17.33295,9.46388 -84.1424,41.40676 -73.30775,62.91361 16.32736,32.40991 116.76576,36.24241 118.81595,67.25047 z"
           transform="matrix(0.26458333,0,0,0.26458333,18.209565,1.3379215)"
           inkscape:transform-center-x="0.010307266"
           inkscape:transform-center-y="-0.03263138" />
        <g
           id="g23636"
           transform="translate(214.53597,-45.56051)">
          <text
             xml:space="preserve"
             style="font-style:normal;font-weight:normal;font-size:10.5833px;line-height:1.25;font-family:sans-serif;fill:#808080;fill-opacity:1;stroke:none;stroke-width:0.264583;filter:url(#filter23374)"
             x="-136.7704"
             y="197.54176"
             id="text3760-62"><tspan
               sodipodi:role="line"
               id="tspan3758-5"
               style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:22.5778px;font-family:C059;-inkscape-font-specification:'C059, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#808080;stroke-width:0.264583"
               x="-136.7704"
               y="197.54176">Charm</tspan></text>
          <text
             xml:space="preserve"
             style="font-style:normal;font-weight:normal;font-size:10.5833px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
             x="-136.7704"
             y="197.54176"
             id="text23516"><tspan
               sodipodi:role="line"
               id="tspan23514"
               style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:22.5778px;font-family:C059;-inkscape-font-specification:'C059, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;stroke-width:0.264583"
               x="-136.7704"
               y="197.54176">Charm</tspan></text>
        </g>
      </g>
    </g>
    <g
       id="BOTTOM"
       
       transform="translate(157.01464,-109.64583)">
      <path
         sodipodi:type="star"
         style="fill:#0000ff"
         id="path908"
         inkscape:flatsided="false"
         sodipodi:sides="5"
         sodipodi:cx="251.86295"
         sodipodi:cy="848.84912"
         sodipodi:r1="155.13663"
         sodipodi:r2="46.550251"
         sodipodi:arg1="-0.22854781"
         sodipodi:arg2="0.39977072"
         inkscape:rounded="0.50457732"
         inkscape:randomized="0"
         d="m 402.96547,813.70085 c 13.78924,59.27997 -84.53458,-2.79766 -108.22275,53.26596 -23.68817,56.06362 89.35896,83.29507 37.24147,114.72794 -52.1175,31.43285 -23.4619,-81.26169 -84.10161,-86.46586 -60.63972,-5.20418 -51.60488,110.72501 -97.60451,70.87161 -45.99962,-39.85339 70.03434,-47.42482 56.2451,-106.7048 -13.78924,-59.27997 -121.252535,-14.86325 -97.56437,-70.92686 23.68817,-56.06362 66.74549,51.95153 118.86299,20.51866 52.1175,-31.43286 -23.33331,-119.91101 37.30641,-114.70683 60.63972,5.20417 -28.78335,79.53264 17.21627,119.38604 45.99963,39.85339 106.83176,-59.24584 120.621,0.0341 z"
         transform="matrix(0.26458333,0,0,0.26458333,-27.594201,20.892551)"
         inkscape:transform-center-x="-0.05672936"
         inkscape:transform-center-y="-0.27091017" />
      <g
         id="g23642"
         transform="translate(131.40429,16.135167)">
        <text
           xml:space="preserve"
           style="font-style:normal;font-weight:normal;font-size:10.5833px;line-height:1.25;font-family:sans-serif;fill:#808080;fill-opacity:1;stroke:none;stroke-width:0.264583;filter:url(#filter23378)"
           x="-133.31786"
           y="239.96536"
           id="text3760-8"><tspan
             sodipodi:role="line"
             id="tspan3758-6"
             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:22.5778px;font-family:C059;-inkscape-font-specification:'C059, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#808080;stroke-width:0.264583"
             x="-133.31786"
             y="239.96536">Bottom</tspan></text>
        <text
           xml:space="preserve"
           style="font-style:normal;font-weight:normal;font-size:10.5833px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
           x="-133.31786"
           y="239.96536"
           id="text23520"><tspan
             sodipodi:role="line"
             id="tspan23518"
             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:22.5778px;font-family:C059;-inkscape-font-specification:'C059, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;stroke-width:0.264583"
             x="-133.31786"
             y="239.96536">Bottom</tspan></text>
      </g>
    </g>
    <g
       id="TOP"
       
       transform="translate(-9.5921356,-12.286024)">
      <path
         sodipodi:type="star"
         style="fill:#ff6600"
         id="path1214"
         inkscape:flatsided="false"
         sodipodi:sides="8"
         sodipodi:cx="765.07263"
         sodipodi:cy="656.06836"
         sodipodi:r1="225.92136"
         sodipodi:r2="71.547607"
         sodipodi:arg1="0.41171021"
         sodipodi:arg2="1.1855862"
         inkscape:rounded="0.19095073"
         inkscape:randomized="0"
         d="m 972.1155,746.47694 c -24.74583,24.33692 -155.16064,-48.18191 -180.15858,-24.10402 -21.23193,20.4505 85.06669,144.27095 55.58861,144.02537 -34.70675,-0.28913 -75.64539,-143.78489 -110.34724,-144.43546 -29.47393,-0.55256 -41.86373,162.1662 -62.53424,141.14839 -24.33692,-24.74582 48.18191,-155.16063 24.10402,-180.15857 -20.45049,-21.23194 -144.27095,85.06669 -144.02537,55.5886 0.28913,-34.70674 143.78489,-75.64538 144.43546,-110.34723 0.55257,-29.47393 -162.1662,-41.86373 -141.14839,-62.53424 24.74582,-24.33692 155.16063,48.18191 180.15857,24.10402 21.23194,-20.4505 -85.06669,-144.27095 -55.5886,-144.02537 34.70674,0.28913 75.64538,143.78488 110.34723,144.43546 29.47393,0.55256 41.86374,-162.1662 62.53424,-141.1484 24.33693,24.74583 -48.1819,155.16064 -24.10402,180.15858 20.4505,21.23193 144.27095,-85.06669 144.02538,-55.58861 -0.28914,34.70675 -143.78489,75.64539 -144.43547,110.34724 -0.55256,29.47393 162.1662,41.86373 141.1484,62.53424 z"
         transform="matrix(0.26458333,0,0,0.26458333,17.678719,49.025177)"
         inkscape:transform-center-x="2.550242e-06"
         inkscape:transform-center-y="-2.1868944e-06" />
      <g
         id="g23648"
         transform="translate(320.98931,-68.59539)">
        <text
           xml:space="preserve"
           style="font-style:normal;font-weight:normal;font-size:10.5833px;line-height:1.25;font-family:sans-serif;fill:#808080;fill-opacity:1;stroke:none;stroke-width:0.264583;filter:url(#filter23382)"
           x="-124.86078"
           y="296.40631"
           id="text3760-2"><tspan
             sodipodi:role="line"
             id="tspan3758-84"
             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:22.5778px;font-family:C059;-inkscape-font-specification:'C059, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#808080;stroke-width:0.264583"
             x="-124.86078"
             y="296.40631">Top</tspan></text>
        <text
           xml:space="preserve"
           style="font-style:normal;font-weight:normal;font-size:10.5833px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
           x="-124.86078"
           y="296.40631"
           id="text23524"><tspan
             sodipodi:role="line"
             id="tspan23522"
             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:22.5778px;font-family:C059;-inkscape-font-specification:'C059, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;stroke-width:0.264583"
             x="-124.86078"
             y="296.40631">Top</tspan></text>
      </g>
    </g>
  </g>
  <text  id="object-list" x="5%" y="98%"> </text>
</svg>
   
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type='text/javascript' src="select_test.js"></script>

</div>

</body>
</html>

CodePudding user response:

If you want top capture the clicks on the texts and paths belonging to a group, set the listener to the group itself, not to its children. For instance (.object is the class of your containing groups):

d3.selectAll(".object").on("click", event => {...})

Any click on the texts or paths will bubble up to the group. Then, in the listener, the group itself is event.currentTarget (not event.target). Here's a demo, click on either the paths or the texts to see the group's ID:

d3.selectAll(".object").on("click", event => {
  console.log(d3.select(event.currentTarget).attr("id"))
});
<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='utf-8' />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <div id="pagebox">
    <div id="pagetext">
      <script src="https://d3js.org/d3.v7.min.js"></script>

      <!-- <?xml version="1.0" encoding="UTF-8" standalone="no"?> -->
      <!-- Created with Inkscape (http://www.inkscape.org/) -->

      <div>
        <svg width="300mm" height="300mm" viewBox="0 0 300 300" version="1.1" id="svg5" inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)" sodipodi:docname="simpletest.svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
          xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <style
     type="text/css"
     id="style6478">
     .object {
     }
    .object:hover path{
    filter: invert(25%);
    }
    .object:hover text{
    stroke: red !important;
    }
  </style>
  <sodipodi:namedview
     id="namedview7"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageshadow="2"
     inkscape:pageopacity="0.0"
     inkscape:pagecheckerboard="0"
     inkscape:document-units="mm"
     showgrid="false"
     inkscape:zoom="0.77771465"
     inkscape:cx="415.31943"
     inkscape:cy="560.61693"
     inkscape:window-width="2560"
     inkscape:window-height="1367"
     inkscape:window-x="0"
     inkscape:window-y="0"
     inkscape:window-maximized="1"
     inkscape:current-layer="layer1" />
  <defs
     id="defs2">
    <filter
       inkscape:collect="always"
       style="color-interpolation-filters:sRGB"
       id="filter23362"
       x="-0.21715227"
       y="-0.33301318"
       width="1.4343045"
       height="1.6660264">
      <feGaussianBlur
         inkscape:collect="always"
         stdDeviation="2.8947016"
         id="feGaussianBlur23364" />
    </filter>
    <filter
       inkscape:collect="always"
       style="color-interpolation-filters:sRGB"
       id="filter23366"
       x="-0.10409501"
       y="-0.41750906"
       width="1.20819"
       height="1.8350181">
      <feGaussianBlur
         inkscape:collect="always"
         stdDeviation="2.8947016"
         id="feGaussianBlur23368" />
    </filter>
    <filter
       inkscape:collect="always"
       style="color-interpolation-filters:sRGB"
       id="filter23370"
       x="-0.077371133"
       y="-0.32769348"
       width="1.1547423"
       height="1.655387">
      <feGaussianBlur
         inkscape:collect="always"
         stdDeviation="2.8947016"
         id="feGaussianBlur23372" />
    </filter>
    <filter
       inkscape:collect="always"
       style="color-interpolation-filters:sRGB"
       id="filter23374"
       x="-0.087590236"
       y="-0.40918108"
       width="1.1751805"
       height="1.8183622">
      <feGaussianBlur
         inkscape:collect="always"
         stdDeviation="2.8947016"
         id="feGaussianBlur23376" />
    </filter>
    <filter
       inkscape:collect="always"
       style="color-interpolation-filters:sRGB"
       id="filter23378"
       x="-0.081836401"
       y="-0.41750906"
       width="1.1636728"
       height="1.8350181">
      <feGaussianBlur
         inkscape:collect="always"
         stdDeviation="2.8947016"
         id="feGaussianBlur23380" />
    </filter>
    <filter
       inkscape:collect="always"
       style="color-interpolation-filters:sRGB"
       id="filter23382"
       x="-0.16101779"
       y="-0.33301318"
       width="1.3220356"
       height="1.6660264">
      <feGaussianBlur
         inkscape:collect="always"
         stdDeviation="2.8947016"
         id="feGaussianBlur23384" />
    </filter>
  </defs>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1">
    <g
       id="UP"
       
       transform="translate(11.563771,-64.681805)">
      <path
         sodipodi:type="star"
         style="fill:#00ffff"
         id="path1672"
         inkscape:flatsided="false"
         sodipodi:sides="7"
         sodipodi:cx="523.42645"
         sodipodi:cy="217.09364"
         sodipodi:r1="86.442635"
         sodipodi:r2="14.696225"
         sodipodi:arg1="0.8123193"
         sodipodi:arg2="0.28780638"
         inkscape:rounded="0.448574"
         inkscape:randomized="0"
         d="m 582.88314,279.841 c 5.35083,32.8006 -13.71042,-68.70018 -45.36493,-58.57584 -36.53429,11.68508 -0.33162,53.0041 -26.07898,81.43593 -22.30835,24.63429 45.16366,-53.5531 17.51186,-71.98917 -31.91452,-21.27813 -41.64703,32.78824 -79.92915,30.38511 -33.16889,-2.08215 70.02858,1.92055 67.20187,-31.19319 -3.26246,-38.21848 -51.60138,-12.11783 -73.59104,-43.54632 -19.05258,-27.23068 42.16055,55.94799 66.2875,33.0919 27.84629,-26.37953 -22.69884,-47.89893 -11.83739,-84.68648 9.41072,-31.87396 -17.45522,67.84545 15.4573,72.45811 37.98622,5.32374 23.29639,-47.61115 58.83007,-62.056 30.78754,-12.51548 -63.92687,28.65391 -47.01258,57.2619 19.52176,33.01812 51.74897,-11.47122 85.19728,7.30392 28.98073,16.26739 -62.26027,-32.11462 -74.08101,-1.0537 -13.64299,35.84918 41.23351,33.30678 47.4092,71.16383 z"
         transform="matrix(0.42663437,0,0,0.41124782,-106.21075,162.18301)" />
      <g
         id="g23618"
         transform="translate(250.26312,180.71417)">
        <text
           xml:space="preserve"
           style="font-style:normal;font-weight:normal;font-size:10.5833px;line-height:1.25;font-family:sans-serif;fill:#808080;fill-opacity:1;stroke:none;stroke-width:0.264583;filter:url(#filter23362)"
           x="-150.91611"
           y="75.8302"
           id="text3760"><tspan
             sodipodi:role="line"
             id="tspan3758"
             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:22.5778px;font-family:C059;-inkscape-font-specification:'C059, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#808080;stroke-width:0.264583"
             x="-150.91611"
             y="75.8302">Up</tspan></text>
        <text
           xml:space="preserve"
           style="font-style:normal;font-weight:normal;font-size:10.5833px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
           x="-150.91611"
           y="75.8302"
           id="text23504"><tspan
             sodipodi:role="line"
             id="tspan23502"
             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:22.5778px;font-family:C059;-inkscape-font-specification:'C059, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;stroke-width:0.264583"
             x="-150.91611"
             y="75.8302">Up</tspan></text>
      </g>
    </g>
    <g
       id="DOWN"
       
       transform="translate(-62.762975,13.141356)">
      <path
         sodipodi:type="star"
         style="fill:#ff00ff"
         id="path1060"
         inkscape:flatsided="false"
         sodipodi:sides="6"
         sodipodi:cx="845.16614"
         sodipodi:cy="231.4547"
         sodipodi:r1="149.04474"
         sodipodi:r2="41.035686"
         sodipodi:arg1="1.0517739"
         sodipodi:arg2="1.5753727"
         inkscape:rounded="0.29895484"
         inkscape:randomized="0.076959846"
         d="m 916.15407,349.81596 c -32.84226,13.97841 -27.08989,-79.14993 -60.70658,-81.40101 -33.61668,-2.25108 -64.96689,118.49599 -96.04802,102.81497 -31.08114,-15.68103 73.65724,-99.57555 56.66469,-129.52175 -16.99255,-29.9462 -121.05415,17.51758 -125.10914,-17.88352 -4.055,-35.4011 100.43851,19.43601 116.97024,-10.44889 16.53173,-29.8849 -61.18096,-87.98233 -30.86975,-105.44935 30.31121,-17.467024 28.64471,86.76374 64.12971,85.50885 35.485,-1.25488 37.79764,-98.293706 69.66072,-83.42358 31.86309,14.87012 -50.12489,77.99806 -33.70016,108.56265 16.42474,30.56459 125.33442,-29.46863 123.84882,5.31301 -1.48563,34.78165 -95.91495,-5.55885 -115.73353,21.03757 -19.81858,26.59642 63.73525,90.91264 30.893,104.89105 z"
         transform="matrix(0.22674491,0,0,0.2279117,8.7005744,39.372945)"
         inkscape:transform-center-x="6.2351939e-06" />
      <g
         id="g23624"
         transform="translate(333.00775,-26.494491)">
        <text
           xml:space="preserve"
           style="font-style:normal;font-weight:normal;font-size:10.5833px;line-height:1.25;font-family:sans-serif;fill:#808080;fill-opacity:1;stroke:none;stroke-width:0.264583;filter:url(#filter23366)"
           x="-164.48285"
           y="124.53662"
           id="text3760-0"><tspan
             sodipodi:role="line"
             id="tspan3758-8"
             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:22.5778px;font-family:C059;-inkscape-font-specification:'C059, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#808080;stroke-width:0.264583"
             x="-164.48285"
             y="124.53662">Down</tspan></text>
        <text
           xml:space="preserve"
           style="font-style:normal;font-weight:normal;font-size:10.5833px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
           x="-164.48285"
           y="124.53662"
           id="text23508"><tspan
             sodipodi:role="line"
             id="tspan23506"
             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:22.5778px;font-family:C059;-inkscape-font-specification:'C059, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;stroke-width:0.264583"
             x="-164.48285"
             y="124.53662">Down</tspan></text>
      </g>
    </g>
    <g
       id="STRANGE"
       
       transform="translate(34.763054,15.984447)">
      <path
         sodipodi:type="star"
         style="fill:#ffcc00"
         id="path846"
         inkscape:flatsided="false"
         sodipodi:sides="5"
         sodipodi:cx="397.02145"
         sodipodi:cy="296.07111"
         sodipodi:r1="150.17648"
         sodipodi:r2="51.75964"
         sodipodi:arg1="-0.011353076"
         sodipodi:arg2="1.3523548"
         inkscape:rounded="-2.0740482"
         inkscape:randomized="0"
         d="M 547.18826,294.36618 C 751.36441,63.927525 230.19766,597.78083 408.23821,346.60075 526.81863,179.30717 257.05722,356.45721 445.04703,438.36137 727.30111,561.33497 58.527063,230.64568 352.43107,322.35339 c 195.74902,61.08013 -56.09154,-140.73585 -75.89498,63.36287 -29.73353,306.44051 78.10812,-431.790019 81.71024,-123.93145 2.39912,205.04317 116.5145,-96.836 -83.71451,-52.60022 -300.63041,66.41706 434.79345,-59.14521 143.11567,39.41414 -194.26628,65.64352 128.10147,80.8879 24.15658,-95.87159 -156.06629,-265.39252 190.609,395.23626 6.7401,148.29072 -122.46229,-164.47325 -37.34344,146.82747 98.64409,-6.65168 z"
         transform="matrix(0.26458333,0,0,0.26458333,-57.748131,-20.89065)" />
      <g
         id="g23630"
         transform="translate(153.32697,-97.46846)">
        <text
           xml:space="preserve"
           style="font-style:normal;font-weight:normal;font-size:10.5833px;line-height:1.25;font-family:sans-serif;fill:#808080;fill-opacity:1;stroke:none;stroke-width:0.264583;filter:url(#filter23370)"
           x="-147.31439"
           y="156.24136"
           id="text3760-6"><tspan
             sodipodi:role="line"
             id="tspan3758-4"
             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:22.5778px;font-family:C059;-inkscape-font-specification:'C059, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#808080;stroke-width:0.264583"
             x="-147.31439"
             y="156.24136">Strange</tspan></text>
        <text
           xml:space="preserve"
           style="font-style:normal;font-weight:normal;font-size:10.5833px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
           x="-147.31439"
           y="156.24136"
           id="text23512"><tspan
             sodipodi:role="line"
             id="tspan23510"
             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:22.5778px;font-family:C059;-inkscape-font-specification:'C059, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;stroke-width:0.264583"
             x="-147.31439"
             y="156.24136">Strange</tspan></text>
      </g>
    </g>
    <g
       id="CHARM"
       
       transform="translate(-72.090177,24.95995)">
      <g
         id="g881">
        <path
           sodipodi:type="star"
           style="fill:#008000"
           id="path1444"
           inkscape:flatsided="false"
           sodipodi:sides="7"
           sodipodi:cx="347.50473"
           sodipodi:cy="542.39465"
           sodipodi:r1="154.38631"
           sodipodi:r2="72.512718"
           sodipodi:arg1="-0.032833585"
           sodipodi:arg2="-0.037963645"
           inkscape:rounded="0.27552922"
           inkscape:randomized="-0.33474631"
           d="m 533.76592,587.52958 c 1.36048,20.57658 -71.70394,-24.49015 -78.73751,-3.60336 -10.59931,31.47553 -23.36808,18.22802 -29.84139,47.17439 -4.29561,19.20848 -14.49448,-68.59702 -35.61571,-61.45505 -31.82881,10.76265 -17.313,156.63585 -48.12015,151.55082 -20.44327,-3.37436 4.2646,-115.12109 -15.50147,-130.16937 -29.78664,-22.67712 -73.84372,87.83809 -94.38722,66.65881 -13.63243,-14.05433 55.75354,-85.83803 50.76647,-105.02432 -7.51531,-28.91295 -44.81467,-64.23839 -35.3416,-101.5723 6.28622,-24.77436 21.00375,120.6931 33.03052,98.23825 18.12385,-33.83852 -23.81513,-160.20757 -0.2713,-182.71076 15.62342,-14.93286 20.60586,131.19413 46.66628,132.59932 39.27196,2.11755 135.72485,-56.1122 161.84488,-41.85051 17.33295,9.46388 -84.1424,41.40676 -73.30775,62.91361 16.32736,32.40991 116.76576,36.24241 118.81595,67.25047 z"
           transform="matrix(0.26458333,0,0,0.26458333,18.209565,1.3379215)"
           inkscape:transform-center-x="0.010307266"
           inkscape:transform-center-y="-0.03263138" />
        <g
           id="g23636"
           transform="translate(214.53597,-45.56051)">
          <text
             xml:space="preserve"
             style="font-style:normal;font-weight:normal;font-size:10.5833px;line-height:1.25;font-family:sans-serif;fill:#808080;fill-opacity:1;stroke:none;stroke-width:0.264583;filter:url(#filter23374)"
             x="-136.7704"
             y="197.54176"
             id="text3760-62"><tspan
               sodipodi:role="line"
               id="tspan3758-5"
               style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:22.5778px;font-family:C059;-inkscape-font-specification:'C059, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#808080;stroke-width:0.264583"
               x="-136.7704"
               y="197.54176">Charm</tspan></text>
          <text
             xml:space="preserve"
             style="font-style:normal;font-weight:normal;font-size:10.5833px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
             x="-136.7704"
             y="197.54176"
             id="text23516"><tspan
               sodipodi:role="line"
               id="tspan23514"
               style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:22.5778px;font-family:C059;-inkscape-font-specification:'C059, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;stroke-width:0.264583"
               x="-136.7704"
               y="197.54176">Charm</tspan></text>
        </g>
      </g>
    </g>
    <g
       id="BOTTOM"
       
       transform="translate(157.01464,-109.64583)">
      <path
         sodipodi:type="star"
         style="fill:#0000ff"
         id="path908"
         inkscape:flatsided="false"
         sodipodi:sides="5"
         sodipodi:cx="251.86295"
         sodipodi:cy="848.84912"
         sodipodi:r1="155.13663"
         sodipodi:r2="46.550251"
         sodipodi:arg1="-0.22854781"
         sodipodi:arg2="0.39977072"
         inkscape:rounded="0.50457732"
         inkscape:randomized="0"
         d="m 402.96547,813.70085 c 13.78924,59.27997 -84.53458,-2.79766 -108.22275,53.26596 -23.68817,56.06362 89.35896,83.29507 37.24147,114.72794 -52.1175,31.43285 -23.4619,-81.26169 -84.10161,-86.46586 -60.63972,-5.20418 -51.60488,110.72501 -97.60451,70.87161 -45.99962,-39.85339 70.03434,-47.42482 56.2451,-106.7048 -13.78924,-59.27997 -121.252535,-14.86325 -97.56437,-70.92686 23.68817,-56.06362 66.74549,51.95153 118.86299,20.51866 52.1175,-31.43286 -23.33331,-119.91101 37.30641,-114.70683 60.63972,5.20417 -28.78335,79.53264 17.21627,119.38604 45.99963,39.85339 106.83176,-59.24584 120.621,0.0341 z"
         transform="matrix(0.26458333,0,0,0.26458333,-27.594201,20.892551)"
         inkscape:transform-center-x="-0.05672936"
         inkscape:transform-center-y="-0.27091017" />
      <g
         id="g23642"
         transform="translate(131.40429,16.135167)">
        <text
           xml:space="preserve"
           style="font-style:normal;font-weight:normal;font-size:10.5833px;line-height:1.25;font-family:sans-serif;fill:#808080;fill-opacity:1;stroke:none;stroke-width:0.264583;filter:url(#filter23378)"
           x="-133.31786"
           y="239.96536"
           id="text3760-8"><tspan
             sodipodi:role="line"
             id="tspan3758-6"
             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:22.5778px;font-family:C059;-inkscape-font-specification:'C059, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#808080;stroke-width:0.264583"
             x="-133.31786"
             y="239.96536">Bottom</tspan></text>
        <text
           xml:space="preserve"
           style="font-style:normal;font-weight:normal;font-size:10.5833px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
           x="-133.31786"
           y="239.96536"
           id="text23520"><tspan
             sodipodi:role="line"
             id="tspan23518"
             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:22.5778px;font-family:C059;-inkscape-font-specification:'C059, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;stroke-width:0.264583"
             x="-133.31786"
             y="239.96536">Bottom</tspan></text>
      </g>
    </g>
    <g
       id="TOP"
       
       transform="translate(-9.5921356,-12.286024)">
      <path
         sodipodi:type="star"
         style="fill:#ff6600"
         id="path1214"
         inkscape:flatsided="false"
         sodipodi:sides="8"
         sodipodi:cx="765.07263"
         sodipodi:cy="656.06836"
         sodipodi:r1="225.92136"
         sodipodi:r2="71.547607"
         sodipodi:arg1="0.41171021"
         sodipodi:arg2="1.1855862"
         inkscape:rounded="0.19095073"
         inkscape:randomized="0"
         d="m 972.1155,746.47694 c -24.74583,24.33692 -155.16064,-48.18191 -180.15858,-24.10402 -21.23193,20.4505 85.06669,144.27095 55.58861,144.02537 -34.70675,-0.28913 -75.64539,-143.78489 -110.34724,-144.43546 -29.47393,-0.55256 -41.86373,162.1662 -62.53424,141.14839 -24.33692,-24.74582 48.18191,-155.16063 24.10402,-180.15857 -20.45049,-21.23194 -144.27095,85.06669 -144.02537,55.5886 0.28913,-34.70674 143.78489,-75.64538 144.43546,-110.34723 0.55257,-29.47393 -162.1662,-41.86373 -141.14839,-62.53424 24.74582,-24.33692 155.16063,48.18191 180.15857,24.10402 21.23194,-20.4505 -85.06669,-144.27095 -55.5886,-144.02537 34.70674,0.28913 75.64538,143.78488 110.34723,144.43546 29.47393,0.55256 41.86374,-162.1662 62.53424,-141.1484 24.33693,24.74583 -48.1819,155.16064 -24.10402,180.15858 20.4505,21.23193 144.27095,-85.06669 144.02538,-55.58861 -0.28914,34.70675 -143.78489,75.64539 -144.43547,110.34724 -0.55256,29.47393 162.1662,41.86373 141.1484,62.53424 z"
         transform="matrix(0.26458333,0,0,0.26458333,17.678719,49.025177)"
         inkscape:transform-center-x="2.550242e-06"
         inkscape:transform-center-y="-2.1868944e-06" />
      <g
         id="g23648"
         transform="translate(320.98931,-68.59539)">
        <text
           xml:space="preserve"
           style="font-style:normal;font-weight:normal;font-size:10.5833px;line-height:1.25;font-family:sans-serif;fill:#808080;fill-opacity:1;stroke:none;stroke-width:0.264583;filter:url(#filter23382)"
           x="-124.86078"
           y="296.40631"
           id="text3760-2"><tspan
             sodipodi:role="line"
             id="tspan3758-84"
             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:22.5778px;font-family:C059;-inkscape-font-specification:'C059, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#808080;stroke-width:0.264583"
             x="-124.86078"
             y="296.40631">Top</tspan></text>
        <text
           xml:space="preserve"
           style="font-style:normal;font-weight:normal;font-size:10.5833px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
           x="-124.86078"
           y="296.40631"
           id="text23524"><tspan
             sodipodi:role="line"
             id="tspan23522"
             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:22.5778px;font-family:C059;-inkscape-font-specification:'C059, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;stroke-width:0.264583"
             x="-124.86078"
             y="296.40631">Top</tspan></text>
      </g>
    </g>
  </g>
  <text  id="object-list" x="5%" y="98%"> </text>
</svg>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script type='text/javascript' src="select_test.js"></script>

      </div>

</body>

</html>

  • Related