1

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

然而，在文本内容对 SEO 很重要的地方（如链接和标题），仅 SVG 并不能削减它。是否有任何等效的技术允许在视觉上隐藏标题或锚中的文本，同时不影响内联 SVG。

注意：我知道 Google 确实索引 SVG，但它似乎很随意，即使自由使用<title>and 也是如此<desc>。

4

1 回答 1

0

我只能根据 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;

使用具有 100% 大小的绝对定位子元素的标准 div（或元素）。

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

  <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 演示

于 2014-04-30T14:59:22.920 回答