SVG设置属性填充不起作用答案

【问题标题】：SVG set attribute fill not workingSVG设置属性填充不起作用
【发布时间】：2012-07-19 12:06:25
【问题描述】：

我希望我的 svg 在其内部的按钮悬停时更改其填充。

<set attributeName="fill" to="#AEAEAE" begin="button.mouseover" end="button.mouseout"/>

我认为这会起作用，但它保留了 #FF702A 的原始填充

有人可以帮忙吗？

/////编辑//////

我对其进行了重构以使其更简单。除非我遗漏了一些主要概念，否则仅使用 css 应该是可能的？

这里是html-

 <div id="button">show svg onhover
     <svg id="play" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="42px" height="62px" viewBox="0 0 24 32" style="enable-background:new 0 0 24 32;" xml:space="preserve" xmlns:xml="http://www.w3.org/XML/1998/namespace">
    <g id="Layer_1">
    </g>
    <g id="play">
      <polygon points="0,0 24,16 0,32  "/>      
    </g>
   </svg>
  </div>

这里是相关的css

#button {

height: 75px;
width: 275px;
font-size: 25px;
text-align: center;
background: #FF702A;
border-radius: 10px;
padding-top: 40px;
margin-top: 70px;
margin-left: 150px;
opacity: 0.7;
letter-spacing: 1px;
font-variant: small-caps;
color: #EEEEEE;

}

#button:hover {
opacity: 1.0;
font-size: .01em;

}

#play{
position: absolute;
margin-left: -90px;
margin-top: -10px;
visibility: hidden;

}

#play:hover {
visibility: visible;

}

在悬停时隐藏文本是一种技巧，但为什么 svg 的可见性在悬停时不起作用？很抱歉从原来的问题采取不同的方向，但希望这能澄清一点。希望用纯 css 完成..

【问题讨论】：

您有两个 id 为“play”的元素，这可能不是您想要的。

标签： css svg smil

【解决方案1】：

你也可以用 CSS 来做到这一点：

#button { fill: #FF702A; }
#button:hover { fill: #AEAEAE; }

如果您想知道为什么它不起作用，您必须将带有 id="button" 的元素（及其子元素，如果有的话）添加到问题中。

【讨论】：

我想我遇到的真正麻烦是让按钮上的实际 SVG 在悬停时显示并在其他情况下隐藏。不过感谢您的帮助，现在它一团糟，我必须重构它。
好吧，那不一样了——也许你的按钮是一个元素？在这种情况下，您可能会得到冒泡的 mouseout/mouseover 事件，这些事件会干扰事物，您可以尝试使用不会冒泡的 mouseenter/mouseleave。但就像我写的那样，只需提供更多的 svg，应该不难说出哪里出了问题。