SVG设置属性填充不工作

我希望我的svg在其内部的按钮悬停时更改填充。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;

}

这是一个黑客隐藏悬停的文本，但为什么不可见性工作onHover选项为SVG？对不起，把它从原来的问题不同的方向，但希望这会清理一些东西。展望纯CSS来实现..

来源

2012-07-14 computer_smile

你有两个ID为“play”的元素，这可能不是你想要的。 – 2012-07-19 08:06:52

你也可以只做到这一点与CSS：

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

你必须元素与ID =“按钮”添加（和它的孩子如果有的话）这个问题是否需要回答为什么它不起作用。

来源

2012-07-16 10:50:11

我想我真正的麻烦是得到实际的SVG按钮上显示悬停和否则隐藏。感谢您的帮助，但现在它变得混乱了，我不得不重构它。 – 2012-07-17 18:54:38

好吧，这是不同的 - 也许你的按钮是一个元素？在这种情况下，您可能会遇到干扰事件的冒泡mouseout/mouseover事件，您可以尝试使用不起泡的mouseenter/mouseleave。但就像我写的，只是提供更多的svg，不应该很难说出了什么问题。 – 2012-07-18 06:35:41

SVG设置属性填充不工作

回答

相关问题