我有一個帶有多個包含文本的矩形的 SVG。將滑鼠懸停在矩形上時，我想要一個小陰影。由于無法在 rect 元素內添加文本，我在之后添加了它，這意味著文本實際上顯示在矩形的頂部，因此當我將滑鼠懸停在文本上時，不會顯示陰影。
由于文本在 rect 之后，我不能使用同級選擇器。我也嘗試過使用組，但沒有成功。這是我想要獲得的（和代碼）的一個小JSfiddle。
<svg viewBox="0 0 100 100">
<defs>
<style>
.slip {
fill: blue;
}
.st {
fill: white;
}
.slip:hover {
cursor: pointer;
-webkit-filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.7));
filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.7));
}
</style>
</defs>
<g id="slips">
<rect class="slip" x="10" y="10" width="80" height="50"/>
<text class="st" x="20" y="30">1000</text>
</g>
</svg>uj5u.com熱心網友回復：
將文本設定為 pointer-events: none;
<svg viewBox="0 0 100 100">
<defs>
<style>
.slip {
fill: blue;
}
.st {
fill: white;
pointer-events: none;
}
.slip:hover {
cursor: pointer;
-webkit-filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.7));
filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.7));
}
</style>
</defs>
<g id="slips">
<rect class="slip" x="10" y="10" width="80" height="50"/>
<text class="st" x="20" y="30">1000</text>
</g>
</svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/326057.html