我正在try 用SVG和D3.js制作一个响应性的图像 map ,但有一件事我还没弄明白,那就是如何让整个组作为一个对象对点击做出react .作为测试,我将几个对象与它们的文本标签组合在一起,并将它们放置在一起,使它们的边界框重叠.

与现在一样,单击组内的文本标签不会 Select 该组,也不会单击组内的文本边界框内的路径.如何才能使在对象的路径或文本中单击时 Select 整个组,而不考虑我单击的是哪个组成员?

这是我到目前为止所拥有的,你可以在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;
  }
 );

嵌入到html中的svg:

<!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"
       class="object"
       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"
       class="object"
       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"
       class="object"
       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"
       class="object"
       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"
       class="object"
       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"
       class="object"
       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 class="label" 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>

推荐答案

如果您希望顶部捕获属于某个组的文本和路径上的点击,请将侦听器设置为该组本身,而不是其子对象.例如(.object是您所在组的类):

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

在文本或路径上的任何点击都会出现在群组中.然后,在监听程序中,组本身是event.currentTarget(而不是event.target).这里是一个演示,点击路径或文本查看群的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"
       class="object"
       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"
       class="object"
       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"
       class="object"
       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"
       class="object"
       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"
       class="object"
       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"
       class="object"
       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 class="label" 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>

Javascript相关问答推荐

显示图—如何在图例项上添加删除线效果?

如何在 cypress 中使用静态嵌套循环

还原器未正确更新状态

我可以使用空手道用户界面来获取网页的当前滚动位置吗?

如何迭代叔父元素的子HTML元素

如何在ASP.NET项目中使用Google Chart API JavaScript将二次轴线值格式化为百分比

使用getBorbingClientRect()更改绝对元素位置

如何修复使用axios运行TSC index.ts时出现的错误?

Jexl to LowerCase()和Replace()

TabNavigator和StackNavigator之间的Reaction Native中的导航问题

使用Java脚本在div中创建新的span标记

Html/JS:如何在脚本执行前阻止呈现?

在给定的最小值、最大值和分辨率下计算相同分布的值

从C#的Angular 来看,Java回调基础知识

JAVASCRIPT|导入模块中断FOR循环

有没有一种方法可以在不定义任何属性的情况下使用CSS转换?

即使当前目录中存在文件,ReadFileSync也找不到文件

使用new关键字或createElement()创建的自定义元素没有is:属性,为什么?

如何合并对象列表中的连续重复值?

在Next.js v12.3.1和Reaction v18.2.0";中缩小了REACT错误#418和#423