你如何使用css風格的外部svg

Question

是否有可能使用css風格的外部.svg像你會用文本？我錯過了什麼？ 我的標記和CSS是這樣的：

<style type="text/css"> 
#ob { 
    color: blue; 
} 

svg { 
    fill: currentColor; 
} 


<object id="ob" type="image/svg+xml" data="czo_svg_icons/czo_extra_closed.svg">Your browser does not support SVG</object> 

Answer 1

如果包括通過引用外部文件，你的SVG圖像像你這樣的object標籤做，SVG圖像中的元素不包括你的主要文件DOM樹。他們構成了他們自己的樹。因此，外部圖像中的元素無法與主文檔中的CSS選擇器匹配。

您可以像設計大多數其他元素一樣設計object元素，例如給它一個邊框。但是你不能（至少這樣）訪問外部圖像中的元素。在你的情況下，你試圖設計#ob的color。這將適用於object的文本顏色，而不適用於引用的svg圖像中的任何顏色。在不支持svg的瀏覽器上，「您的瀏覽器不支持SVG」通知可能會呈現藍色。

您的CSS選擇器svg的情況與此類似：主文檔中的CSS選擇器僅與主文檔中的元素匹配，並且沒有找到svg，只有object。

有一些方法可以將CSS樣式應用於svg元素。這個想法通常是，無論是通過獲取來自外部文件中的SVG元素到主文檔或從主文件到外部文件中的CSS帶來的CSS和SVG元素相同的DOM樹：

1. 將您的svg元素及其子元素直接嵌入到主文檔中，而不是引用外部文件。在這種情況下，svg元素及其子元素將成爲man文檔的DOM樹的一部分，因此它們可以被主文檔的CSS訪問。
2. 將svg元素嵌入到您的主文檔中，並使用xlink的use來引用外部svg圖像（而不是其中的一部分）。有關總體思路，請參見this answer或this answer。
3. 通過AJAX/XHR將外部圖像中的元素加載到主文檔樹中。對於總體思路，請參閱this answer。
4. 您可以用JavaScript抓住外部圖像的樹狀圖並從那裏編輯它們的樣式。關鍵字爲contentDocument，請參閱this answer。
5. 如果你不能從你的外部svg圖像獲取元素到你的主文檔的DOM樹中，所以主文檔CSS選擇器可以匹配它，你可以嘗試另一種方式：將你的CSS添加到你的svg文件中。與您可以將CSS包含到html文檔中的方式類似，您可以使用內聯style屬性，使用style元素（如HTML的head），或引用具有<?xml-stylesheet ... ?>的外部CSS文件。有關更多信息，請參閱例如this tutorial。