Füllen Sie Svg Pfad auf Tabellenzeile Hover

Question

Ich möchte eine Tabelle erstellen, wenn Benutzer auf eine Tabellenzeile schwebt, ein anderes Element/Pfad aus. Svg-Datei/wird mit Farbe gefüllt und die tatsächliche Zeile der Tabelle wird ebenfalls hervorgehoben.

Ich verwendete CSS für die Auswirkungen auf Kind und Eltern divs, versuchte ich jquery, Javascript, aber nichts half.

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

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

 
    \t /* 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

Sie jquery .hover() Verhalten auf mousenter und mouseleave definieren können.

Wenn Sie alle markieren wollen versuchen, diese (Demo)

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

Wenn Sie bestimmten Pfad hervorheben möchten, versuchen Sie diese (Demo)

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