在表格行悬停时填充 svg 路径

Question

我想创建一个表格，当用户将鼠标悬停在表格行上时，来自 .svg 文件/的另一个元素/路径将被填充颜色，并且实际的表格行也将突出显示。

我使用 css 来影响子 div 和父 div，我尝试了 jquery、javascript，但没有任何帮助。

.table {
  width:30%; 
  border-collapse:collapse;
  float: right;
  margin-right: 50px;
}

.table td { 
  padding:7px; border-bottom: 1px solid #4e95f4;
  text-align: center;  
}

    	/* Define the default color for all the table rows */
.table tr {
  background: #b8d1f3;
}
    
.table tr:hover {
  background-color: #ffff99;
  pointer-events: all;
}

.svg {
  margin-top: 80px;
  margin-left: 50px;
}

<table class="table">
  <tr class="flat1">
    <td>FLAT A1</td>
  </tr>
  <tr class="flat2">
    <td>FLAT A2</td>
  </tr>
  <tr class="flat3">
    <td>FLAT B3</td>
  </tr>
  <tr class="flat4">
    <td>FLAT C4</td>
  </tr>
  <tr class="flat5">
    <td>FLAT D5</td>
  </tr>
  <tr class="flat6">
    <td>FLAT E6</td>
  </tr>
  <tr class="flat7">
    <td>FLAT F7</td>
  </tr>
  <tr class="flat8">
    <td>FLAT G8</td>
  </tr>
  <tr class="flat9">
    <td>FLAT H9</td>
  </tr>
  <tr class="flat10">
    <td>FLAT I10</td>
  </tr>
  <tr class="flat11">
    <td>FLAT J11</td>
  </tr>
  <tr class="flat12">
    <td>FLAT K12</td>
  </tr>
  <tr class="flat13">
    <td>FLAT L13</td>
  </tr>
</table>

<svg class="svg" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="77.893mm" width="209.97mm" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 743.99998 276" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <g transform="translate(549.14 -397.22)">
    <image xlink:href="http://tikety.tk/svg/drawing-1-2.png" height="276" width="744" y="397.22" x="-549.14" preserveAspectRatio="none"/>
  </g>
  <g class="g" stroke="#000" fill="none">
    <path class="svgflat1" d="m45.246 191.51v48.057l-5.2879 1.4573v24.872h32.627v-10.736h71.578v5.8794h15.906v-5.8794h20.628s0.49708-73.108 0-73.108h-46.476v18.916h-52.192l0.11534-9.0972z" stroke-width=".99808px"/>
    <path class="svgflat2" d="m45 2.9643 77.5 0.17857 0.71429 62.321-74.464 0.17857v-21.429h-10.536v-15.536h6.7857z" stroke-width="1px"/>
    <path class="svgflat3" d="m46.379 67.424v22.503h-7.3685v16.597h6.6667v23.766h77.72v-63.759z" stroke-width=".99126px"/>
    <path class="svgflat4" d="m45.142 131.35v20.36h-6.6667v15.895h7.3685v24.111h37.193v-13.038l39.825-0.1786v-47.328z" stroke-width=".99126px"/>
    <path class="svgflat5" d="m183.47 254.36h25.972v5.9746h16.325v-7.0136h30.177v-40.004h-10.636v-34.549h-61.591z" stroke-width="1.0037px"/>
    <g stroke="#000" stroke-width="1px">
      <path class="svgflat6" d="m245.72 178.77v35.86h12.122v40.406h27.274v6.0609h20.456v-8.0812h24.496v-73.741z"/>
      <path class="svgflat7" d="m354.06 254.53v7.5761h19.698v-8.8388h31.315v-35.103h9.849v-39.901h-84.853v75.509c7.6808 0 7.1537 0.00001 23.991 0.75762z"/>
      <path class="svgflat8" d="m405.58 252.51v-34.598h9.0914v-39.143h62.124v73.489h-26.264v8.0812h-15.152v-7.0711z"/>
      <path class="svgflat9" d="m477.04 180.29v73.741h22.476v7.3236h16.162v-7.3236h24.749v-52.023h-13.637v-20.961z"/>
      <path class="svgflat10" d="m541.69 254.03h52.023v12.122h26.264v-25.254h-6.3135v-52.528h-35.86v12.879h-36.618z"/>
      <path class="svgflat11" d="m612.15 188.87h-34.345v-10.102h-36.366v-48.487h69.448v23.739h9.3439v12.879h-7.3236z"/>
      <path class="svgflat12" d="m613.16 127.76h-73.741v-58.589h71.216v21.466h9.849v14.9h-7.0711z"/>
      <path class="svgflat13" d="m539.42 67.909-0.25254-61.872h74.246v25.759l7.7462-0.95487v13.582l-7.543 2.0211v20.202l-73.944 1.0102z"/>
    </g>
  </g>
</svg>

Answer 1

您可以使用 jquery .hover() 来定义 mousenter 和 mouseleave 的行为。

如果您想突出显示所有内容，请尝试此操作 (Demo)

$('table').hover(function() {
    $('.svg path').attr('fill', 'red');
}, function() {
    $('.svg path').removeAttr('fill');
});

如果你想突出显示特定路径，试试这个 (Demo)

$('table tr').hover(function() {
   var cls = $(this).attr('class');
   $('.svg .svg' + cls).attr('fill', 'red');
}, function() {
    $('.svg path').removeAttr('fill');
});