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

但是,在文本内容对于SEO很重要的地方(如链接和标题),仅SVG并不能削减文本。是否有任何等效的技术可以使标题或锚点中的文本可视化隐藏,同时不影响内联SVG。

注意:我知道Google确实为SVG编制了索引,但是即使使用<title><desc>的用法也很随意。

最佳答案

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

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

07-24 09:44
查看更多