Question

如何使用透明SVG多边形强制悬停工作？

在下面的代码中，您会看到第二个三角形不容易识别:hover（当stroke属性被删除或none'时，它会完全失败。在第三个三角形中，悬停开始使用透明度，但仅在文本附近。

<html><head><style>
body { background-color: Green }
polygon:hover {
    fill:Red;
}
g:hover polygon {
    fill:Red;
}
</style></head><body>
    <svg width="300px" height="600px" viewBox="0 0 100 200" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <polygon fill="white" stroke="black" stroke-width="0.5px" points="0,0 100,0 100,100 0,0" />
        <polygon fill="none" stroke="black" stroke-width="0.5px" points="0,0 0,100 100,100 0,0" />
        <g>
            <polygon fill="none" stroke="black" stroke-width="0.5px" points="0,100 100,100 100,200 0,100" />
            <text x="50" y="150" font-family="Verdana" font-size="30">hi</text>
        </g>
    </svg>
</body></html>

我已通过Chrome，Firefox和Safari确认了这一点。任何想法（这些都适用于大多数浏览器）？

Answer 1

对于每个元素，填充颜色为fill="red"，并将0设置为填充不透明度fill-opacity="0"。悬停时，将填充不透明度更改为1：

＆＃13;

body {
  background-color: Green
}
polygon:hover {
  fill-opacity: 1;
}
g:hover polygon {
  fill-opacity: 1;
}

＆＃13;

<svg width="300px" height="600px" viewBox="0 0 100 200" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon fill="white" stroke="black" stroke-width="0.5px" points="0,0 100,0 100,100 0,0" />
  <polygon fill="red" fill-opacity="0" stroke="black" stroke-width="0.5px" points="0,0 0,100 100,100 0,0" />
  <g>
    <polygon fill="red" fill-opacity="0" stroke="black" stroke-width="0.5px" points="0,100 100,100 100,200 0,100" />
    <text x="50" y="150" font-family="Verdana" font-size="30">hi</text>
  </g>
</svg>

＆＃13;

Answer 2

另一种方法是使用pointer-events="all"。

使用指针事件，您可以控制形状的哪一部分对指针事件作出反应，而与其填充或描边无关。

circle:nth-of-type(1) {
  pointer-events: fill
}
circle:nth-of-type(2) {
  pointer-events: all
}
circle:nth-of-type(3) {
  pointer-events: stroke
}
circle:nth-of-type(4) {
  pointer-events: none
}
circle:hover {
  fill: red;
  stroke: blue
}

<svg width="300px" height="300px" viewBox="0 0 100 100">
  <circle cx="25" cy="25" r="20" fill="none" stroke="red" stroke-width="5" />
  <circle cx="75" cy="25" r="20" fill="none" stroke="none" stroke-width="5" />
  <circle cx="25" cy="75" r="20" fill="green" stroke="none" stroke-width="5" />
  <circle cx="75" cy="75" r="20" fill="green" stroke="red" stroke-width="5" />
</svg>

将鼠标悬停在透明的SVG上

2 个答案: