使用CSS設置SVG的背景色

Question

第一次在這里發布，所以請輕柔對待我。 :)

我的網站上有一個SVG圖片，該圖片具有透明背景-

<img class="img-responsive center-block" src="images/pritchservices.svg" alt="Pritch Services Logo" />

在我的網站上效果很好。 但是，由於透明性，當該圖像加載到Google圖像搜索結果中時，由於透明性，看起來很糟糕。

我有一個備用圖片（用於fb Open Graph搜尋器），在這里-

Pritch Services完整徽標

在我瘋狂的頭腦中，這就是我的計划：

• 在Illustrator中重做SVG以包括背景色（根據fb OPen Graph圖像）-然后，這意味着Google中的圖像結果將達到預期

• 我的網站內有一些CSS可以將SVG的背景色設置為透明，因此顯示效果很好（就像當前在網站上一樣）

• 我假設我不能只是將SVG標記插入行內，因為這會給我我在頁面上想要的東西，它不會將圖像全部加載到Google圖像搜索結果中嗎？

請問這是走的路嗎？ 還是有我沒有想到的替代解決方案？ 還是我只是太挑剔？

預先感謝大家...

Answer 1

您不能通過<img>包含SVG並不能在父文檔中使用CSS設置其樣式。

1. 您不能設置<img>內容的樣式，即使它是SVG
2. CSS不適用於文檔邊界

您有幾種選擇。

1. 在頁面中包含帶有背景的版本。 然后隱藏它，並通過CSS將其替換為透明背景版本。

    <div class="logo"> <img src="logo-with-background.svg" ... /> </div> .logo img { display: none; } .logo { background-image: url(logo-without-background.svg); } 

2. 使用<object>包括背景版本，然后使用DOM查找背景元素並將其隱藏。

    var object = document.getElementById("myObject"); var svgDoc = myObject.contentDocument; svgDoc.getElementById("bg").setAttribute("display", "none"); 

3. 按照@Obink的建議將剪切路徑應用於背景版本。 它將起作用，但是它不是最簡單的解決方案。 而且它在不支持剪輯路徑的舊版瀏覽器中將無法使用。