有一个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