如何为矩形上的文本添加 SVG 悬停事件?
How to add an SVG hover event for text on a rectangle?
我有一个包含多个包含文本的矩形的 SVG。将鼠标悬停在矩形上时,我想要一个小阴影。由于不能在 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>
将文本设置为 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>
我有一个包含多个包含文本的矩形的 SVG。将鼠标悬停在矩形上时,我想要一个小阴影。由于不能在 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>
将文本设置为 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>