用css操作svg顏色

Question

我已經在illustrator中搜索了一個svg圖標，並且想在我的網站中使用它。我已經把它放在html中可以看到圖標。

<div id="search-btn"> 
    <img src="svg/search.svg"> 
</div> 

但是因爲我把它做成黑色，所以我想改變放大鏡的顏色和背景。如何使用css來操縱svg的顏色？我對svg非常陌生，你的幫助將非常有價值。謝謝。

搜索圖標：

SVG代碼：

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"> 
<path id="XMLID_10_" d="M98.2,89.7L63,54.5c-0.1-0.1-0.1-0.1-0.2-0.2c4-5.6,6.3-12.4,6.3-19.8c0-19-15.4-34.4-34.4-34.4 
    c-19,0-34.4,15.4-34.4,34.4c0,19,15.4,34.4,34.4,34.4c7.3,0,14-2.3,19.6-6.1c0.1,0.1,0.1,0.2,0.2,0.3l35.2,35.2 
    c2.4,2.4,6.2,2.4,8.5,0l0,0C100.6,95.9,100.6,92.1,98.2,89.7z M7.3,34.5c0-15.1,12.3-27.4,27.4-27.4c15.1,0,27.4,12.3,27.4,27.4 
    c0,15.1-12.3,27.4-27.4,27.4C19.6,61.9,7.3,49.6,7.3,34.5z"/> 
</svg> 

Answer 1

正如在這個答案

CSS不適跨文檔的評論說，和IMG是一個單獨的文件。 圖像必須自包含在單個文件中以保護隱私。 - 羅伯特Longson

因此，這意味着你將無法提供您SVG在img標籤和頁面上使用CSS定製。因此，您有兩種選擇：

內嵌SVG代碼，表示廢除img標記。然後，您可以按如下所示定位SVG。

#search-btn svg { 
 
    fill: blue; 
 
    background: grey; 
 
    width: 100px; 
 
    }

<div id="search-btn"> 
 
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"> 
 
    <path id="XMLID_10_" d="M98.2,89.7L63,54.5c-0.1-0.1-0.1-0.1-0.2-0.2c4-5.6,6.3-12.4,6.3-19.8c0-19-15.4-34.4-34.4-34.4 
 
    c-19,0-34.4,15.4-34.4,34.4c0,19,15.4,34.4,34.4,34.4c7.3,0,14-2.3,19.6-6.1c0.1,0.1,0.1,0.2,0.2,0.3l35.2,35.2 
 
    c2.4,2.4,6.2,2.4,8.5,0l0,0C100.6,95.9,100.6,92.1,98.2,89.7z M7.3,34.5c0-15.1,12.3-27.4,27.4-27.4c15.1,0,27.4,12.3,27.4,27.4 
 
    c0,15.1-12.3,27.4-27.4,27.4C19.6,61.9,7.3,49.6,7.3,34.5z" /> 
 
    </svg> 
 
</div>

或者你可以添加樣式到SVG文件本身，如下，但是這類似於簡單的編輯文件在Illustrator中得到你想要的顏色。

<div id="search-btn"> 
 
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"> 
 
    <defs> 
 
     <style> 
 
     #XMLID_10_ { 
 
      fill: blue; 
 
     } 
 
     </style> 
 
    </defs> 
 
    <path id="XMLID_10_" d="M98.2,89.7L63,54.5c-0.1-0.1-0.1-0.1-0.2-0.2c4-5.6,6.3-12.4,6.3-19.8c0-19-15.4-34.4-34.4-34.4 
 
    c-19,0-34.4,15.4-34.4,34.4c0,19,15.4,34.4,34.4,34.4c7.3,0,14-2.3,19.6-6.1c0.1,0.1,0.1,0.2,0.2,0.3l35.2,35.2 
 
    c2.4,2.4,6.2,2.4,8.5,0l0,0C100.6,95.9,100.6,92.1,98.2,89.7z M7.3,34.5c0-15.1,12.3-27.4,27.4-27.4c15.1,0,27.4,12.3,27.4,27.4 
 
    c0,15.1-12.3,27.4-27.4,27.4C19.6,61.9,7.3,49.6,7.3,34.5z" /> 
 
    </svg> 
 
</div>