Question

图片里面有一些文字。在悬停时，svg会更改背景颜色，除非将鼠标悬停在其中的文本上方。

当将鼠标悬停在文本上时，如何更改svg-background？

<svg class="svg">
    <polygon class="polygon" points="100,10 40,198 190,78 10,78 160,198">
    </polygon>
    <text class="number" x="85" y="115">456</text>
</svg>

.svg {

}
.svg .polygon {
   fill: red;
}
.svg .polygon:hover {
  fill: blue;
}
.svg .number {
  font-size: 19px;
}

https://jsfiddle.net/king_s/kcoetje0/

Answer 1

要实现此目的，您需要将pointer-events: none;添加到<text>标记。

<强> CSS

.svg .number {
  font-size: 19px;
  pointer-events: none; /* <-- Add This */
}

<强> JSFiddle

在svg-imge中更改背景颜色，其中包含文本

1 个答案: