Question

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

然而，在文本内容对SEO很重要的地方（如链接和标题），SVG本身并没有削减它。野外是否存在任何等效技术，允许在标题或锚点内的文本被视觉隐藏，同时保持内联SVG不受影响。

注意：我知道Google确实为SVG编制了索引，但即使使用<title>和<desc>也是如此，它似乎很随意。

Answer 1

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

首先，定义您的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;

使用标准div（或元素），其绝对定位的子项为100％。

然后在绝对定位的子项

中添加一个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

是否存在与内联SVG一起使用的图像替换的等效技术

1 个答案: