悬停时更改 svg 多边形的颜色答案

【问题标题】：Change color of svg polygon on hover悬停时更改 svg 多边形的颜色
【发布时间】：2020-07-11 00:30:05
【问题描述】：

我想在悬停时使用 css 更改 svg 的每个多边形的颜色。

这是hmtl代码：

<svg class="compass-svg" width="200" height="200">
     <polygon id="N" points="100,10 125,50 100,100 75,50" style="fill:#fff; stroke:#000; stroke-width: 1;"/>
     <polygon id="NE" points="155,45 150,75 100,100 125,50" style="fill:#fff; stroke:#000; stroke-width: 1;"/>
</svg>

当我悬停其中一个多边形时，它的填充应该变成#000。

我已经尝试使用 id 更改颜色：

/*This does not work*/
#N:hover {
    fill: #000;
}

我使用 jquery 找到了这个解决方案，但我想知道这是否可以使用纯 css 来实现： my svg polygons fills are not changing color on hover

【问题讨论】：

标签： html css svg polygon

【解决方案1】：

悬停不够具体。

如果您将元素的填充转换为 CSS 映射属性，它将起作用。
或者，您可以将 !important 添加到悬停填充。

#N:hover {
    fill: red;
}

<svg class="compass-svg" width="200" height="200">
     <polygon id="N" points="100,10 125,50 100,100 75,50" fill="#fff" style="stroke:#000; stroke-width: 1;"/>
     <polygon id="NE" points="155,45 150,75 100,100 125,50" style="fill:#fff; stroke:#000; stroke-width: 1;"/>
</svg>

【讨论】：

!important 成功了。我只是忘记了问题中的 :hover 。

【解决方案2】：

是的，因为您的 svg 中有内联样式。您可以保留它并将 !important 添加到您的 css 中

#N {
fill: #000 !important;
}

或执行以下操作

#N{fill: #000;}

<svg class="compass-svg" width="200" height="200">
     <polygon fill="#fff" stroke="#000" stroke-width="1" id="N" points="100,10 125,50 100,100 75,50"/>
     <polygon fill="#fff" stroke="#000" stroke-width="1" id="NE" points="155,45 150,75 100,100 125,50"/>
</svg>

如果您希望在悬停时更改填充，只需将 :hover 添加到 #N

#N:hover {
fill: #000 !important;
}

或

#N:hover{fill: #000;}

<svg class="compass-svg" width="200" height="200">
     <polygon fill="#fff" stroke="#000" stroke-width="1" id="N" points="100,10 125,50 100,100 75,50"/>
     <polygon fill="#fff" stroke="#000" stroke-width="1" id="NE" points="155,45 150,75 100,100 125,50"/>
</svg>

【讨论】：

【解决方案3】：

这是我想出的方法：

这是样式

#N:hover {
    fill: #000;
}

#NE:hover {
    fill: #000;
}

#NE {
 fill: #fff;
}
#N {
 fill: #fff;
}

<svg class="compass-svg" width="200" height="200">
     <polygon id="N" points="100,10 125,50 100,100 75,50" style="stroke:#000; stroke-width: 1;"/>
     <polygon id="NE" points="155,45 150,75 100,100 125,50" style="stroke:#000; stroke-width: 1;"/>
</svg>

【讨论】：

【解决方案4】：

当你使用内联样式时，你需要使用 !important

#N:hover,#NE:hover {
    fill: black!important;
}

<svg class="compass-svg" width="200" height="200">
     <polygon id="N" points="100,10 125,50 100,100 75,50" style="fill:#fff; stroke:#000; stroke-width: 1;"/>
     <polygon id="NE" points="155,45 150,75 100,100 125,50" style="fill:#fff; stroke:#000; stroke-width: 1;"/>
</svg>

【讨论】：