使用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的建议将剪切路径应用于背景版本。 它将起作用，但是它不是最简单的解决方案。 而且它在不支持剪辑路径的旧版浏览器中将无法使用。