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設置屬性填充不工作

回答

相關問題