html - 是否有与内联 SVG 一起使用的图像替换的等效技术

Question

有一个wealth of techniques用于使用背景图像替换图像，但我发现自己越来越多地使用内联 SVG(主要是因为我可以使用 CSS 操作其组件)。

然而，在文本内容对 SEO 很重要的地方(如链接和标题)，单靠 SVG 并不能解决问题。在野外是否有任何等效技术允许在视觉上隐藏标题或 anchor 中的文本，同时不影响内联 SVG。

注意:我知道谷歌确实索引了 SVG，但它看起来很武断，即使自由使用 <title> 也是如此。和 <desc> .

Answer 1

我只能根据 Chris Coyier 在 CSS-Tricks.com 上的这篇文章提出以下建议

Reference Article

首先，定义你的 SVG

<!-- TEMPLATE -->
<svg width="100px" height="100px" viewBox="0 0 100 100" class="hardcore-hide">
  <circle id="template" cx="50" cy="50" r="50">
    </svg>

..但是用 display:none;

隐藏它

使用带有 100% 大小的绝对定位子项的标准 div(或元素)。

然后在绝对定位的子元素中添加一个 SVG use 元素

  <div class="logo circle-1">
    <h1>Logo text</h1>
    <svg viewBox="0 0 100 100" class="circle circle-1">
      <use xlink:href="#template">
        </svg>
      </div>

CSS(到目前为止)看起来像这样。

.hardcore-hide {
  display: none;
}

.circle {
  height: 100px;
  width: 100px;
}

body {
  padding: 1rem;
}

.logo {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  border:1px solid grey;
  width:200px;
  height:100px;
  position: relative;
  display: inline-block;
}

.logo svg {
  position: absolute;
  height:100%;
  width:100%;
  top:0;
  left:0;
}

然后你可以添加额外的样式如下

.circle-1  svg {
  fill: red;
}
.circle-2 svg {
  fill: orange;
}
.circle-3  svg {
  fill: #f06d06;
}

Codepen Demo