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

Question

I want to create a table, when user hovers on a table row, another element /path from .svg file/ will be filled with color and the actual table row will be highlighted too.

I used css for affecting child and parent divs, I tried jquery, javascript, but nothing helped.

 .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

You can use jquery .hover() to define behavior on mousenter and mouseleave .

If you want to highlight all try this ( Demo )

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

If you want to highlight specific path, try this ( Demo )

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