svg画css,CSS vs. SVG:图形文本的效果
這篇文章是探索有關(guān)于CSS和SVG技術(shù)的系列文章第一篇，通過例子來闡述CSS和SVG相關(guān)技術(shù)的比較。因為大家對SVG有一定的偏見，這個系列文章只是為了證明SVG解決Web上的某些設(shè)計問題。因為它是自然圖像。但從客觀的角度來看，我們要考慮每個技術(shù)的利弊，找出何時何地使用CSS或SVG更好。
在這篇文章中，我們將復習一些使用CSS或SVG創(chuàng)建圖形文本的技術(shù)和相關(guān)影響。
CSS創(chuàng)建的圖形文本
老的CSS方法
幾年前，我們要在網(wǎng)頁上創(chuàng)建吸引人的文本視覺效果，需要通過圖像替換文本的方案，否則是無法實現(xiàn)想要的圖形文本。
這是顯示圖像文本的概念，文本在屏幕上可能顯示出較好的一個效果。當我們沒有實現(xiàn)它的時候，屏幕上就會顯示文本，這個效果也不錯。我們把實現(xiàn)它的技術(shù)稱為圖像替換文本技術(shù)。
假設(shè)你想在
標題上通過吸引人注意力的圖像來顯示相同的文本，你會使用類似下面的CSS：
h1.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background-image: url(…);
}
通過文本縮進確保標題的內(nèi)容超過自己的邊界溢出，并且通過overflow:hidden將溢出的文本隱藏起來，保證溢出的標題文本不顯示出來。所以你最終看到的矩形區(qū)域(
)內(nèi)沒有文本顯示。
然后標題區(qū)域?qū)@示出你在圖形編輯器(例如Photoshop)創(chuàng)建的圖形文本。
所以，顯示在屏幕上標題矩形區(qū)域，里面沒有文本內(nèi)容，通過背景圖像顯示圖形文本。所以你需要做的是制作效果不錯的圖形文本。
自從Kellum提出這個方案后沒有更好的解決方案提供給開發(fā)人員使用，所以把上面的這種方法稱為Kellum方法。事實上，有不少圖像替代文本技術(shù)，但是Kellum方法取代了他們中的大多數(shù)方法，因為它是“最好”的選項。
這種技術(shù)是一種Hack手段，致使用戶不能選擇文本(因為它是運用在背景中的圖形文本)，接下來介紹的新的屬性可以達到類似的效果，并且不需要使用圖像替換文本技術(shù)。
新的CSS方法
@Lucas Bebber在Dreamweaver的博客中寫了一篇《squiggly text effects》文章，有很多創(chuàng)建圖形文本的效果，包括一些彎彎曲曲的文本效果。最常見的文本效果是紋理填充的文本效果或簡單的紋理混合文本的效果，看起來像是一張背景圖像。
紋理填充文本
使用CSS的background-clip屬性，可以將背景圖像填充到文本。這個屬性決定了元素的背景區(qū)域，其默認值是border-box，背景會延伸到元素的邊框邊界，但可以將其值設(shè)置為padding-box或content-box，將背景延伸到內(nèi)距邊界或內(nèi)容邊界。
在Webkit內(nèi)核中對background-clip有一個擴展值，那就是text,使用背景根據(jù)文本進行裁剪。然后通過Webkit給文本自定的私有屬性-webkit-text-fill-color，并且設(shè)置其值為transparent，背景圖像就會顯示在文本中，從而完成了剪切效果。
例如，將一個元素的背景圖像在其文本內(nèi)顯示，可以給元素定義一個類名，然后運用這些樣式：
.clippedElement {
/* background image that will serve as text fill */
background: url(path/to/your/image.jpg) no-repeat center center;
/* -webkit-background-clip clips the background of the element to the text */
-webkit-text-fill-color: transparent; /* overrides the white text color in webkit browsers */
-webkit-background-clip: text;
/* general styles */
background-size: 100% auto;
color: #fff;
text-align: center;
padding: 2em;
}
正如你看到的，屬性前面使用的前綴，你就不難發(fā)現(xiàn)，這個效果只有在Webkit內(nèi)核的瀏覽器才能看到效果，而在Firefox和IE瀏覽器中是看不到效果的。
回到前面所說的
標題上，給他設(shè)置一個背景，在頁面上就可以不需要隱藏文本也能看到文本填充效果。還有一個替代方案，將標題放在一個div內(nèi)，并且把需要填充到文本的圖像設(shè)置為這個div的背景圖像，使用上面的CSS樣式就能實現(xiàn)圖像文本。
下面這個示例演示的技術(shù)，確保你在Chrome、Safari和Opera瀏覽器都能看到效果：
對于不支持的瀏覽器，你可以看到一個簡單的效果，就是文本的圖像之上，只要你確保文本與背景圖像的顏色有區(qū)別，就不會引起任何閱讀上的問題。
注意，背景圖像可以是任何圖像，包括CSS的漸變，因為CSS的漸變也是一個背景圖像。你可以從這里了解CSS漸變的所有知識點。
紋理填充文本(使用CSS混合模式)
接下來，我們將使用CSS的mask技術(shù)創(chuàng)建下圖的文本效果，文本看上去有一部被抹掉了：
當使用CSS的mask時，圖像文本是帶了一個蒙板，而不是圖像的形狀(或被剪切的形狀)。
上面顯示的效果使用了圖片來做蒙板，一年前我在Codrops上寫過一篇有關(guān)于這方面的文章。圖像做為一個蒙板，將文本區(qū)域下的背景展示出來。如果選擇合適的蒙板圖片與背景，可以得到一個無縫融合的效果。我們使用了一張油漆四濺的圖像做為蒙板。為了簡單起見，其自身不做任何的圖層混合模式處理，只將紋理應用到文本上。
蒙板圖像可以是任何你想要的圖像，包括漸變做的漸變效果。
當你把CSS的mask運用到文本上或任何其他的內(nèi)容時，黑色區(qū)域的文本是可見的，蒙板圖像透明部分的文本是不會顯示。這是因為蒙板圖像在CSS中使用時，默認是一個透明通道，而不是一個亮度蒙板，這樣就造成了蒙板黑色區(qū)域的文本顯示出來。
對于漸變做為蒙板圖像的情況時，是從黑色過渡到透明。例如，蒙板元素將是完全不透明的黑色，逐漸變得半透明，然后慢慢的變得透明。
使用CSS的mask-image將蒙板圖像用在適當?shù)奈谋局?#xff1a;
h1 {
/* the line that applies the splatter effect */
mask-image: url(../img/splatter-mask_1.png);
/* any general styles go here like font family, alignment, etc. */
}
在寫這篇文章之時，CSS的mask屬性支持度不是很好。Firefox瀏覽器只支持SVG的蒙板，而Webkit瀏覽器需要添加瀏覽器的私有前綴-webkit。有關(guān)于mask屬性的瀏覽器兼容性，可以查看下表：
這是另一種實現(xiàn)紋理文本的方法，但也是不可靠。下面這個示例演示了這個效果，請使用Webkit內(nèi)核瀏覽器查看：
如果你想使用漸變做為蒙板圖像，可以使用下面的代碼替換mask-image的值：
mask-image: linear-gradient(black, transparent);
這樣能看到一個文本淡出的效果。這就是如何在一個元素或文本上使用CSS實現(xiàn)紋理的方法。隨著SVG的出現(xiàn)，我們或許可以找到更好的方案。
使用SVG實現(xiàn)圖像文本
SVG太棒了。(我不得不這么說。)現(xiàn)在，為了簡單起見，我們將使用代碼來解釋這一切。
在使用SVG時，文本和效果都將定義在一個元素內(nèi)。
紋理填充文本
制作一個帶紋理的文本，首要的就是先定認一個紋理，然后選擇你喜歡的顏色填充到元素上。在我們的案例中，SVG是一段文本。
對于本例，我們將定義一個線性漸變，并將其運用到一個文本上。
代碼看起來像這樣：
Gradient-filled TextRadiant Text
注意：我們給svg指定了一個高度和寬度，但是為了確保svg是彈性的，可以使用CSS的百分比做為單位來覆蓋默認的尺寸。如果你感興趣，可以點擊這里學習如何實現(xiàn)響應式設(shè)計的SVG。
在這個示例中使用linearGradient給元素定義需要的紋理，同時給這個漸變linearGradient設(shè)置一個#id，然后通過fill屬性將漸變紋理用在元素上。這樣是不是更具語義呢？
這是上面代碼的效果：
紋理可以是任何東西，哪怕是SVG的元素引用的外部圖像(JPEG、PNG和GIF圖像等)。它也可以是一個SVG的元素。
因為SVG是一個圖形，為了方便屏幕閱讀器能讀到，一定要給其定義一個title。中的這個title就相當于元素的alt屬性。
背景紋理填充文本(使用混合模式)
類似前面的技術(shù)，將CSS的mask和SVG的結(jié)合起來，可以將紋理填充到SVG的元素上。在填充之前，首先要做的是定義一個紋理。在SVG中可以使用定義紋理，并且在元素上使用mask屬性替代fill屬性，將定義的紋理填充到文本中。
在下面這個示例中，我們制作了一個類似于被咬過的文本效果，如下圖所示：
使用SVG制作一個咬痕的紋理，并且應用到一個文本之上。
首先通過圖形編輯器制作一個咬痕的紋理，為了達到需要的效果，先在文本上添加需要的效果。它助于你在想要的地方得到你需要的效果。
然后，將圖形導出成SVG，并且將圖形的蒙板放在元素內(nèi)，導出的代碼如下所示：
nom
nom
nom
有一點需要特別的注意：在SVG中不像CSS的，蒙板元素需要填充白色，而不是黑色。黑色和白色之間的任何值都將呈現(xiàn)為半透明狀態(tài)，如此一來，元素越接白色(#ffffff)，蒙板越不透明，蒙板的顏色越接近黑色(#000000)，越接近透明。
因此，在上面的例子中，給咬過的形狀填充為黑色，而整個SVG元素填充的是白色，這是為了確保文本在畫布的任何地方都可以顯示，除了黑色的咬痕之處不顯示。
上面的示例代碼，在瀏覽器上的效果看起來像這樣：
這里你要做的僅是在SVG中將需要的紋理填充到文本上。你可以使用一個漸變、圖像或其他任何形狀或模式來填充你的文本。在元素上你有很多的選擇項，也可以創(chuàng)建很多有趣的效果，比如動畫紋理填充。
使用SVG制作動畫紋理填充
SVG不僅為我們提供更好的支持和模塊化(因為文本和其效果都包裝在一起)，而且SVG還可以實現(xiàn)動畫效果。
在SVG的元素內(nèi)，你可以給其定義一個填充(fill)時，也可以使用動畫填充。這意味著，你將可以實現(xiàn)類似下圖的一些動畫紋理填充文本的效果：
在上面的示例中，有一個是使用了GIF動畫圖片做的填充，所以在文本的填充里也保持了GIF動畫效果。
在Codrops我寫過一篇文章，主要闡述的就是如何使用SVG給文本創(chuàng)建動畫紋理，如果你想了解更多的細節(jié)，可以仔細閱讀這篇文章。
總結(jié)
直到瀏覽器全面支持CSS的background-clip:text屬性之前，SVG絕對是創(chuàng)建紋理填充文本效果的最佳方法。
事實上，我個人仍然喜歡使用SVG創(chuàng)建動畫，雖然CSS中有更好的動畫功能。我喜歡這個的原因是，SVG可以將文本和效果封裝為一個圖形，這樣可以復制，也可以降級處理，更可以重用。更為重要的是，SVG的更具可讀性，更具語義，也可以完全選擇。
請持續(xù)關(guān)注CSS和SVG技術(shù)的比較，在下一篇文章中將繼續(xù)為大家闡述相關(guān)的技術(shù)，通過這些示例的比較，更好的幫助大家做出更好的選擇，決定選擇哪一種技術(shù)。
總結(jié)
以上是生活随笔為你收集整理的svg画css,CSS vs. SVG:图形文本的效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： U盘中病毒看不到怎么办 U盘中的病毒如何
- 下一篇： ie浏览器10怎么卸载 IE浏览器10如