更改嵌入按钮的 SVG 路径答案

【问题标题】：Change SVG Path Embedded into button更改嵌入按钮的 SVG 路径
【发布时间】：2015-10-21 04:05:37
【问题描述】：

我可以很容易地更改 SVG 路径，但是当我将它插入按钮时，css:hover 在 Firefox 中不起作用。请查看JSfiddle demo

CSS：

#Fill-1 {
  fill: red;
}
#Fill-1:hover {
  fill: black;
}

【问题讨论】：

标签： css svg

【解决方案1】：

按钮会吞下鼠标事件，因此 SVG 永远不会得到它们。您可以通过将悬停定位到按钮来使悬停工作。您需要确保您定位的项目没有内联填充属性，以便按钮的填充可以设置它。

button {
     fill:red;
 }
button:hover {
     fill:black;
 }

有一个Firefox bug 跟踪这个

【讨论】：

【解决方案2】：

按钮类似乎没有搞砸任何事情。您应该尝试将 css 更改为指向 Button 而不是 #Fill-1 和 #Fill-2。不需要它们。

button {fill:red}
button:hover {fill:black}

【讨论】：