使用CSS樣式化SVG時遇到麻煩？

Question

嗨，我是使用SVG的新手，但我認為SVG的整個想法是可以更改背景色等。無論如何，我使用的是開源clrs.cc，並且內置了svg填充和筆觸，但是沒有在我的搜索圖標上工作。

<img src="ic_search_48px.svg" class="fill-navy" alt="This should be a search icon">

CSS類如下所示：

.fill-navy {
 fill: #001F3F; }

感謝您的幫助！

Answer 1

基本上，您不能更改用作實際圖像或背景圖像的SVG的顏色。

CSS僅會影響頁面HTML中的內聯 SVG。

例如。

 .hidden { display: none; } .icon { width: 48px; height: 48px; } .large { width: 96px; height: 96px; } .red { fill: red; } .green { fill: green; } 

 <svg xmlns="http://www.w3.org/2000/svg" class="hidden"> <defs> <g id="search" viewBox="0 0 48 48"> <path d="M31 28h-1.59l-.55-.55C30.82 25.18 32 22.23 32 19c0-7.18-5.82-13-13-13S6 11.82 6 19s5.82 13 13 13c3.23 0 6.18-1.18 8.45-3.13l.55.55V31l10 9.98L40.98 38 31 28zm-12 0c-4.97 0-9-4.03-9-9s4.03-9 9-9 9 4.03 9 9-4.03 9-9 9z" /> </g> </defs> </svg> <svg class="icon" viewBox="0 0 48 48">> <use xlink:href="#search" class="red" /> </svg> <svg class="icon large" viewBox="0 0 48 48">> <use xlink:href="#search" class="green" /> </svg> 

1. 額外閱讀-CSS-Tricks.com上的文章
2. 另外-SVG圖標@ CSS-Tricks.com