在表行悬停上填充svg路径 [英] Fill svg path on table row hover
本文介绍了在表行悬停上填充svg路径的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想创建一个表，当用户将鼠标悬停在表格行上时，另一个来自.svg文件/的元素/路径将填充颜色，实际的表格行也会突出显示。
我使用css来影响父子div，我尝试了jquery，javascript，但没有任何帮助。
.table {width：30％;边界崩溃：崩溃; float：right; margin-right：50px;}。table td {padding：7px; border-bottom：1px solid＃4e95f4; text-align：center; } / *定义所有表行的默认颜色* /。table tr {background：＃b8d1f3;} .table tr：hover {background-color：＃ffff99; pointer-events：all;}。svg {margin-top：80px; margin-left：50px;}
< table class = 表 > < 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> < / table>< svg class =svgxmlns：rdf =http://www.w3.org/1999/02/22-rdf-syntax-ns#xmlns =http ：//www.w3.org/2000/svgheight =77.893mmwidth =209.97mmversion =1.1xmlns：cc =http://creativecommons.org/ns#xmlns：xlink = http://www.w3.org/1999/xlinkviewBox =0 0 743.99998 276xmlns：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.pngheight =276width =744y =397.22x = - 549.14preserveAspectRatio =无/> < / g取代; < g class =gstroke =＃000fill =none> < path class =svgflat1d =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.476 v18.916h-52.192l0.11534-9.0972zstroke-width =。99808px/> < path class =svgflat2d =m45 2.9643 77.5 0.17857 0.71429 62.321-74.464 0.17857v-21.429h-10.536v-15.536h6.7857zstroke-width =1px/> < path class =svgflat3d =m46.379 67.424v22.503h-7.3685v16.597h6.6667v23.766h77.72v-63.759zstroke-width =。99126px/> < path class =svgflat4d =m45.142 131.35v20.36h-6.6667v15.895h7.3685v24.111h37.193v-13.038l39.825-0.1786v-47.328zstroke-width =。99126px/ > < path class =svgflat5d =m183.47 254.36h25.972v5.9746h16.325v-7.0136h30.177v-40.004h-10.636v-34.549h-61.591zstroke-width =1.0037px/> gt ; < g stroke =＃000stroke-width =1px> < path class =svgflat6d =m245.72 178.77v35.86h12.122v40.406h27.274v6.0609h20.456v-8.0812h24.496v-73.741z/> < path class =svgflat7d =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 =svgflat8d =m405.58 252.51v-34.598h9.0914v-39.143h62.124v73.489h-26.264v8.0812h-15.152v-7.0711z/> < path class =svgflat9d =m477.04 180.29v73.741h22.476v7.3236h16.162v-7.3236h24.749v-52.023h-13.637v-20.961z/> < path class =svgflat10d =m541.69 254.03h52.023v12.122h26.264v-25.254h-6.3135v-52.528h-35.86v12.879h-36.618z/> < path class =svgflat11d =m612.15 188.87h-34.345v-10.102h-36.366v-48.487h69.448v23.739h9.3439v12.879h-7.3236z/> < path class =svgflat12d =m613.16 127.76h-73.741v-58.589h71.216v21.466h9.849v14.9h-7.0711z/> < path class =svgflat13d =m539.42 67.909-0.25254-61.872h74.246v25.75917.7462-0.95487v13.582l-7.543 2.0211v20.202l-73.944 1.0102z/> < / g取代; < / g>< / svg>
解决方案
您可以使用jquery .hover（） mousenter 和 mouseleave 中定义行为。
如果您想突出显示所有内容（ Demo ）
$（'table'）。hover（function（）{
$（'。svg path'）。attr（'fill'， 'red'）;
}，function（）{
$（'。svg path'）。removeAttr（'fill'）;
}）;
如果要突出显示特定路径，请尝试以下操作（
$ $ p $ $（'table tr' ）.hover（function（）{
var cls = $（this）.attr（'class'）;
$（'。svg .svg'+ cls）.attr（'fill'，'红'';
}，函数（）{
$（'。svg path'）。removeAttr（'fill'）;
}）;
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>
解决方案
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');
});
这篇关于在表行悬停上填充svg路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
