是否有一種等效的圖像替換技術用於內聯SVG

有一個wealth of techniques用於實現用背景圖像進行圖像替換，但是我發現自己越來越多地使用內聯SVG（主要是因爲我可以使用CSS來操縱它的組件）。是否有一種等效的圖像替換技術用於內聯SVG

但是，在文本內容對SEO很重要的地方（如鏈接和標題），SVG本身並不會削減它。在野外是否有任何等效的技術允許在標題或錨點中的文本被視覺隱藏，同時使內聯SVG不受影響。

注意：我知道Google確實編制了SVG索引，但它似乎很隨意，即使大量使用<title>和<desc>。

2014-04-30 Undistraction

我覺得你有這樣的南轅北轍。它應該被稱爲「測試替代品」。你究竟在做什麼？移動文本並替換爲背景SVG不應該成爲問題。 –

你有沒有嘗試過這樣的事情？這只是一個定期的圖像/文字替換交易，但：http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ *但是，我沒有工作很多與svg，所以它可能無法正常工作 – Meg

只要圖像是一個背景元素，它將工作很多。使用內聯SVG會更成問題。 –

我只能建議基於此文章由克里斯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;

使用一個標準的div（或元素）與100％大小的絕對定位的孩子。

那麼絕對定位的孩子

<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（到目前爲止）內添加一個SVG use元素會是這個樣子。

.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; 
}

那麼你可以添加addtional造型如下

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

Codepen Demo

來源

2014-04-30 14:59:22

是否有一種等效的圖像替換技術用於內聯SVG

回答

相關問題