2012-07-17 39 views
1

當下面的輸入元素處於以下位置時,是否可以更改SVG內容的填充顏色:懸停狀態而不更改源svg圖像?造型SVG填充輸入元素的顏色

<input type="image" src="images/toolbar/check.svg" /> 

基於埃裏克的建議,最終制定解決辦法:

首先需要改變與聯SVG內容的按鈕元素的輸入元素:

<button type="button"> 
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 95.453 100" enable-background="new 0 0 95.453 100" xml:space="preserve"><g><g><polygon points="94.587,27.48 31.657,86.15 31.217,85.68 18.847,72.41 0.566,52.81 14.106,40.19 32.387,59.79 81.776,13.74"/></g></g> 
</svg> 
</button> 

然後我們就可以風格使用普通CSS的svg填充顏色:

button:hover svg { 
    fill: red; 
} 

回答

3

爲什麼不使用i nline svg代替它,然後添加一些CSS來設置填充顏色的樣式。這應該更有效率。