"SVG 對象從外部 CSS 更改顏色"

Question

我正在玩 SVG（試圖用 SVG 替換圖標字體。）我讓它使用對象標簽渲染圖像\/svg。 但是，我不能讓它從 CSS 中改變顏色。 假設，我更喜歡用 CSS 為它着色，有沒有辦法在我用來嵌入 SVG 時做到這一點。

   <object class="partnerLogo" type="image/svg+xml" data="assets/logos/sample.svg">
           Your browser does not support SVG
   </object>

Answer 1

據我所知，SVG-CSS 中的顏色應該是邊框的stroke和背景的fill ：

.partnerLogo {
  width: 100%;
  height: 100px;
  stroke: red;
  fill: red;
}

Answer 2

如果您使用<object>方法使用 SVG，則無法直接修改填充。 SVG 作為文檔片段包含在 object 標簽內，因此您的屬性不會像您在此圖像中看到的那樣傳遞。

但是，有兩種方法可以修改外部 SVG 的顏色。

1）使用Javascript（推薦）

使用 Javascript，您可以通過 XHR 獲取 SVG 內容，然后將其作為內聯 SVG 注入。 由於它在技術上是內聯 SVG，因此您可以修改填充顏色。 我寫了一個庫（ svg-loader ），可以很容易地做到這一點。

您只需要包含庫並使用 data-src 屬性來加載 SVG。

示例：在這里，我包含了三種不同格式的徽標，修改了填充顏色。

 <script type="text/javascript" src="https://unpkg.com/external-svg-loader@latest/svg-loader.min.js" async></script> <div style="display:flex;"> <div style="background:black;"> <svg data-src="https://s2.svgbox.net/assets/logo-white.svg" fill="yellow"></svg> </div> <div style="background:purple;"> <svg data-src="https://s2.svgbox.net/assets/logo-white.svg" fill="white"></svg> </div> <div style="background:green;"> <svg data-src="https://s2.svgbox.net/assets/logo-white.svg" fill="red"></svg> </div> </div>

2) 使用過濾器 CSS 屬性

您可以使用filter CSS 屬性通過一系列操作（亮度、對比度、色調旋轉......）來達到任何顏色。 對此有一個現有的堆棧溢出討論。

示例：

 .red { filter: invert(20%) sepia(97%) saturate(4013%) hue-rotate(353deg) brightness(93%) contrast(127%); }

 <img src="https://s2.svgbox.net/assets/logo-white.svg" class="red" />

這里的最大缺點是您需要為每種顏色（使用 this ）計算它，並且它的工作原理並不明顯。 此外，它不適用於具有多種顏色的 SVG。

Answer 3

您不能使用外部 CSS 類來設置 <object> 元素中調用的 SVG 的樣式，盡管該主題中的許多博客文章都說您可以與之交互，但這對於這種特殊情況會產生誤導。 您必須在實際的 SVG 內添加內聯格式。

如果您需要從主 css 文件訪問和更改 SVG 的實際對象和路徑，則必須使用 < svg > 標記將其嵌入內聯。

這是一篇涵蓋所有內容的帖子： https : //vecta.io/blog/best-way-to-embed-svg

Answer 4

我知道這是一個老問題了——但這是為那些想用純 CSS 為 SVG 着色而不是必須使用 JS 的未來讀者准備的。 與其他方法相比，我發現這種方法非常方便 - 您甚至可以使用漸變等為 SVG 着色！

我只是制作了一個包含我的 SVG 的 div 並給它一個類。

HTML：

<div class="colourful-svg"></div>

然后使用 CSS 中的蒙版和背景顏色完成顏色。

CSS：

.colourful-svg {
    mask-image: url("path/to/your/svg-file.svg");
    background: green;
    // Make sure you define dimensions for your div otherwise it won't show up
    height: 500px;
    width: 500px;
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
  }

這將使您的 SVG 填充您制作的 div，因此是您需要的大小。 然后它使用掩碼基本上僅通過您使用 url() 函數鏈接到的 SVG 顯示您的背景顏色。

面具現在對前綴有很好的支持（在撰寫本文時，全球大約 94% 來自 caniuse.com），所以我認為這是實現彩色 SVG 的一種非常簡單易行的方法 - 我希望有人覺得這很有用！