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 OPen Graph图像） - 这意味着Google中的图像结果将符合预期
在我的网站中有一些CSS将SVG的背景颜色设置为透明，因此它显示得很好（就像现在在网站上做的那样）
我假设我不能只是将SVG标记内联，因为虽然这会在页面上给出我想要的内容，但它不会在Google图片搜索结果中加载图像吗？

这是要走的路，如果有的话，有关如何实施的任何建议请;或者有没有我想到的替代解决方案？或者我只是太挑剔了？！

先谢谢大家......

Answer 1

您无法通过<img>添加SVG，并在父文档中使用CSS设置样式。

您无法设置<img>的内容的样式，即使它是SVG
CSS不适用于文档边界

您有几个选择。

在页面中包含带背景的版本。然后隐藏它并通过CSS将其替换为透明背景版本。

<div class="logo">
  <img src="logo-with-background.svg" ... />
</div>

.logo img {
  display: none;
}
.logo {
   background-image: url(logo-without-background.svg);
}

使用<object>包含后台版本，然后使用DOM查找背景元素并隐藏它。

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

如@Obink所示，将剪切路径应用于背景版本。它会工作，但它不是最简单的解决方案。并且它不适用于不支持剪辑路径的旧版浏览器。

使用CSS设置SVG的背景颜色

1 个答案: