更改css background-image svg繪製懸停行爲？

我使用svg作爲按鈕的背景圖像。更改css background-image svg繪製懸停行爲？

按鈕需要不同的懸停狀態，這只是改變的SVG填充值。

有一個聰明的辦法，使這些更改SVG這是有效地只是被用作圖像，或者我需要創建一個不同的填充顏色不同的SVG文件？

2013-11-04 jedierikb

相關：http://stackoverflow.com/questions/16042387/svg-spritesheet-targeting-with-css – cimmanon

重複http://stackoverflow.com/questions/13367868/modify-svg-fill-color-when-being-served-as-background-image的？ – peterflynn

如果您使用SVG作爲背景圖片，它將不會交互。把它想象成一個非常像光柵圖像的工作。有兩個圖像肯定是一個解決方案。

來源

2013-11-04 21:31:26

是的，你可以使用SVG內聯。在IE 11.不起作用

<p class="loupe"><a href="#">Lorem ipsum</a></p> 

.loupe a { 
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><path d='M15.838,13.693l-2.785-2.786c0.705-1.102,1.121-2.408,1.121-3.813c0-3.911-3.17-7.081-7.081-7.081s-7.081,3.17-7.081,7.081c0,3.91,3.17,7.08,7.081,7.08c1.406,0,2.711-0.415,3.813-1.121l2.787,2.786c0.195,0.197,0.518,0.197,0.715,0l1.43-1.43C16.037,14.211,16.037,13.89,15.838,13.693z M7.093,12.15c-2.789,0-5.058-2.269-5.058-5.057c0-2.789,2.269-5.058,5.058-5.058c2.79,0,5.057,2.269,5.057,5.058C12.15,9.882,9.883,12.15,7.093,12.15z'/></svg>") no-repeat 0 0; 
    padding-left: 20px; 
    color: #000; 
} 
.loupe a:hover, 
.loupe a:focus { 
    background: url("data:image/svg+xml;utf8,<svg fill='red' xmlns='http://www.w3.org/2000/svg'><path d='M15.838,13.693l-2.785-2.786c0.705-1.102,1.121-2.408,1.121-3.813c0-3.911-3.17-7.081-7.081-7.081s-7.081,3.17-7.081,7.081c0,3.91,3.17,7.08,7.081,7.08c1.406,0,2.711-0.415,3.813-1.121l2.787,2.786c0.195,0.197,0.518,0.197,0.715,0l1.43-1.43C16.037,14.211,16.037,13.89,15.838,13.693z M7.093,12.15c-2.789,0-5.058-2.269-5.058-5.057c0-2.789,2.269-5.058,5.058-5.058c2.79,0,5.057,2.269,5.057,5.058C12.15,9.882,9.883,12.15,7.093,12.15z'/></svg>") no-repeat 0 0; 
    text-decoration: none; 
    color: red; 
}

http://jsfiddle.net/korigan/7e14gogv/

來源

2015-07-01 09:47:35

我相信如果你將它們轉換爲20％，它應該在那裏工作過IE不喜歡數據的URL空間。 –

我只是測試，這是行不通的。 :( –

我昨天看了一個新的方法，但沒有成功。這是被迫放在HTML說明圖標太可惜了。對我來說，自定義元素在CSS。 –

一種與背景位置的另一種方法。

HTML

<div class="locate"> 
    <a href="#">lorem ipsum</a> 
</div>

CSS

.locate a { 
     padding-left: 20px; 
     position: relative; 
     text-decoration: underline; 
     color: #000; 
    } 
    .locate a:before { 
     width: 16px; 
     height: 16px; 
     content: ""; 
     background: transparent url('search.svg') no-repeat scroll 0 0; 
     -webkit-background-size: 16px 32px; 
     background-size: 16px 32px; 
     position: absolute; 
     top: 0; 
     left: 0; 
     /* For screen reader */ 
     speak: none; 
    } 
    .locate a:hover, 
    .locate a:focus { 
     color: #a2005a; 
     text-decoration: none; 
    } 
    .locate a:hover:before, 
    .locate a:focus:before { 
     background-position: 0 -16px; 
    }

SVG

<svg xmlns="http://www.w3.org/2000/svg"> 
<path d="M15.838,13.693l-2.785-2.786c0.705-1.103,1.121-2.408,1.121-3.813c0-3.911-3.17-7.081-7.081-7.081 
    c-3.911,0-7.081,3.17-7.081,7.081c0,3.91,3.17,7.08,7.081,7.08c1.406,0,2.712-0.415,3.813-1.121l2.787,2.786 
    c0.195,0.197,0.518,0.197,0.715,0l1.43-1.43C16.037,14.211,16.037,13.891,15.838,13.693z M7.093,12.15 
    c-2.789,0-5.058-2.27-5.058-5.058c0-2.789,2.269-5.058,5.058-5.058c2.79,0,5.058,2.269,5.058,5.058 
    C12.15,9.882,9.883,12.15,7.093,12.15z"/> 
<path fill="#A2005A" d="M15.838,29.678l-2.785-2.786c0.705-1.103,1.121-2.408,1.121-3.813c0-3.91-3.17-7.08-7.081-7.08 
    c-3.911,0-7.081,3.17-7.081,7.08s3.17,7.08,7.081,7.08c1.406,0,2.712-0.415,3.813-1.121l2.787,2.786 
    c0.195,0.197,0.518,0.197,0.715,0l1.43-1.43C16.037,30.195,16.037,29.875,15.838,29.678z M7.093,28.135 
    c-2.789,0-5.058-2.27-5.058-5.058s2.269-5.058,5.058-5.058c2.79,0,5.058,2.27,5.058,5.058C12.15,25.866,9.883,28.135,7.093,28.135z" 
    /> 
</svg>

來源

2015-07-02 15:11:39

更改css background-image svg繪製懸停行爲？

回答

相關問題