html - 使用 CSS 设置 SVG 的背景颜色

Question

第一次在这里发帖，请对我温柔点。 :)

我的网站上有一张透明背景的 SVG 图片 -

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

在我的网站上效果很好。然而，由于透明度，当该图像加载到谷歌图像搜索结果中时，由于透明度，看起来很糟糕。

我有一张替代图片(用于 fb Open Graph 爬虫)，它在这里 -

Pritch Services Full Logo

在我疯狂的想法中，这就是我的计划:

• 在 Illustrator 中重做 SVG 以包含背景颜色(根据 fb OOpen 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 的建议，将剪切路径应用于后台版本。它会起作用，但它不是最简单的解决方案。它不适用于不支持剪辑路径的旧版浏览器。