這篇文章是探索有關(guān)于CSS和SVG技術(shù)的系列文章第一篇，通過(guò)例子來(lái)闡述CSS和SVG相關(guān)技術(shù)的比較。因?yàn)榇蠹覍?duì)SVG有一定的偏見(jiàn)，這個(gè)系列文章只是為了證明SVG解決Web上的某些設(shè)計(jì)問(wèn)題。因?yàn)樗亲匀粓D像。但從客觀的角度來(lái)看，我們要考慮每個(gè)技術(shù)的利弊，找出何時(shí)何地使用CSS或SVG更好。

在這篇文章中，我們將復(fù)習(xí)一些使用CSS或SVG創(chuàng)建圖形文本的技術(shù)和相關(guān)影響。

CSS創(chuàng)建的圖形文本

老的CSS方法

幾年前，我們要在網(wǎng)頁(yè)上創(chuàng)建吸引人的文本視覺(jué)效果，需要通過(guò)圖像替換文本的方案，否則是無(wú)法實(shí)現(xiàn)想要的圖形文本。

這是顯示圖像文本的概念，文本在屏幕上可能顯示出較好的一個(gè)效果。當(dāng)我們沒(méi)有實(shí)現(xiàn)它的時(shí)候，屏幕上就會(huì)顯示文本，這個(gè)效果也不錯(cuò)。我們把實(shí)現(xiàn)它的技術(shù)稱為圖像替換文本技術(shù)。

假設(shè)你想在

標(biāo)題上通過(guò)吸引人注意力的圖像來(lái)顯示相同的文本，你會(huì)使用類似下面的CSS：

h1.hide-text {

text-indent: 100%;

white-space: nowrap;

overflow: hidden;

background-image: url(…);

}

通過(guò)文本縮進(jìn)確保標(biāo)題的內(nèi)容超過(guò)自己的邊界溢出，并且通過(guò)overflow:hidden將溢出的文本隱藏起來(lái)，保證溢出的標(biāo)題文本不顯示出來(lái)。所以你最終看到的矩形區(qū)域(

)內(nèi)沒(méi)有文本顯示。

然后標(biāo)題區(qū)域?qū)@示出你在圖形編輯器(例如Photoshop)創(chuàng)建的圖形文本。

所以，顯示在屏幕上標(biāo)題矩形區(qū)域，里面沒(méi)有文本內(nèi)容，通過(guò)背景圖像顯示圖形文本。所以你需要做的是制作效果不錯(cuò)的圖形文本。

自從Kellum提出這個(gè)方案后沒(méi)有更好的解決方案提供給開(kāi)發(fā)人員使用，所以把上面的這種方法稱為Kellum方法。事實(shí)上，有不少圖像替代文本技術(shù)，但是Kellum方法取代了他們中的大多數(shù)方法，因?yàn)樗恰白詈谩钡倪x項(xiàng)。

這種技術(shù)是一種Hack手段，致使用戶不能選擇文本(因?yàn)樗沁\(yùn)用在背景中的圖形文本)，接下來(lái)介紹的新的屬性可以達(dá)到類似的效果，并且不需要使用圖像替換文本技術(shù)。

新的CSS方法

@Lucas Bebber在Dreamweaver的博客中寫了一篇《squiggly text effects》文章，有很多創(chuàng)建圖形文本的效果，包括一些彎彎曲曲的文本效果。最常見(jiàn)的文本效果是紋理填充的文本效果或簡(jiǎn)單的紋理混合文本的效果，看起來(lái)像是一張背景圖像。

紋理填充文本

使用CSS的background-clip屬性，可以將背景圖像填充到文本。這個(gè)屬性決定了元素的背景區(qū)域，其默認(rèn)值是border-box，背景會(huì)延伸到元素的邊框邊界，但可以將其值設(shè)置為padding-box或content-box，將背景延伸到內(nèi)距邊界或內(nèi)容邊界。

在Webkit內(nèi)核中對(duì)background-clip有一個(gè)擴(kuò)展值，那就是text,使用背景根據(jù)文本進(jìn)行裁剪。然后通過(guò)Webkit給文本自定的私有屬性-webkit-text-fill-color，并且設(shè)置其值為transparent，背景圖像就會(huì)顯示在文本中，從而完成了剪切效果。

例如，將一個(gè)元素的背景圖像在其文本內(nèi)顯示，可以給元素定義一個(gè)類名，然后運(yùn)用這些樣式：

.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)，這個(gè)效果只有在Webkit內(nèi)核的瀏覽器才能看到效果，而在Firefox和IE瀏覽器中是看不到效果的。

回到前面所說(shuō)的

標(biāo)題上，給他設(shè)置一個(gè)背景，在頁(yè)面上就可以不需要隱藏文本也能看到文本填充效果。還有一個(gè)替代方案，將標(biāo)題放在一個(gè)div內(nèi)，并且把需要填充到文本的圖像設(shè)置為這個(gè)div的背景圖像，使用上面的CSS樣式就能實(shí)現(xiàn)圖像文本。

下面這個(gè)示例演示的技術(shù)，確保你在Chrome、Safari和Opera瀏覽器都能看到效果：

對(duì)于不支持的瀏覽器，你可以看到一個(gè)簡(jiǎn)單的效果，就是文本的圖像之上，只要你確保文本與背景圖像的顏色有區(qū)別，就不會(huì)引起任何閱讀上的問(wèn)題。

注意，背景圖像可以是任何圖像，包括CSS的漸變，因?yàn)镃SS的漸變也是一個(gè)背景圖像。你可以從這里了解CSS漸變的所有知識(shí)點(diǎn)。

紋理填充文本(使用CSS混合模式)

接下來(lái)，我們將使用CSS的mask技術(shù)創(chuàng)建下圖的文本效果，文本看上去有一部被抹掉了：

當(dāng)使用CSS的mask時(shí)，圖像文本是帶了一個(gè)蒙板，而不是圖像的形狀(或被剪切的形狀)。

上面顯示的效果使用了圖片來(lái)做蒙板，一年前我在Codrops上寫過(guò)一篇有關(guān)于這方面的文章。圖像做為一個(gè)蒙板，將文本區(qū)域下的背景展示出來(lái)。如果選擇合適的蒙板圖片與背景，可以得到一個(gè)無(wú)縫融合的效果。我們使用了一張油漆四濺的圖像做為蒙板。為了簡(jiǎn)單起見(jiàn)，其自身不做任何的圖層混合模式處理，只將紋理應(yīng)用到文本上。

蒙板圖像可以是任何你想要的圖像，包括漸變做的漸變效果。

當(dāng)你把CSS的mask運(yùn)用到文本上或任何其他的內(nèi)容時(shí)，黑色區(qū)域的文本是可見(jiàn)的，蒙板圖像透明部分的文本是不會(huì)顯示。這是因?yàn)槊砂鍒D像在CSS中使用時(shí)，默認(rèn)是一個(gè)透明通道，而不是一個(gè)亮度蒙板，這樣就造成了蒙板黑色區(qū)域的文本顯示出來(lái)。

對(duì)于漸變做為蒙板圖像的情況時(shí)，是從黑色過(guò)渡到透明。例如，蒙板元素將是完全不透明的黑色，逐漸變得半透明，然后慢慢的變得透明。

使用CSS的mask-image將蒙板圖像用在適當(dāng)?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. */

}

在寫這篇文章之時(shí)，CSS的mask屬性支持度不是很好。Firefox瀏覽器只支持SVG的蒙板，而Webkit瀏覽器需要添加瀏覽器的私有前綴-webkit。有關(guān)于mask屬性的瀏覽器兼容性，可以查看下表：

這是另一種實(shí)現(xiàn)紋理文本的方法，但也是不可靠。下面這個(gè)示例演示了這個(gè)效果，請(qǐng)使用Webkit內(nèi)核瀏覽器查看：

如果你想使用漸變做為蒙板圖像，可以使用下面的代碼替換mask-image的值：

mask-image: linear-gradient(black, transparent);

這樣能看到一個(gè)文本淡出的效果。這就是如何在一個(gè)元素或文本上使用CSS實(shí)現(xiàn)紋理的方法。隨著SVG的出現(xiàn)，我們或許可以找到更好的方案。

使用SVG實(shí)現(xiàn)圖像文本

SVG太棒了。(我不得不這么說(shuō)。)現(xiàn)在，為了簡(jiǎn)單起見(jiàn)，我們將使用代碼來(lái)解釋這一切。

在使用SVG時(shí)，文本和效果都將定義在一個(gè)元素內(nèi)。

紋理填充文本

制作一個(gè)帶紋理的文本，首要的就是先定認(rèn)一個(gè)紋理，然后選擇你喜歡的顏色填充到元素上。在我們的案例中，SVG是一段文本。

對(duì)于本例，我們將定義一個(gè)線性漸變，并將其運(yùn)用到一個(gè)文本上。

代碼看起來(lái)像這樣：

Gradient-filled Text

Radiant Text

注意：我們給svg指定了一個(gè)高度和寬度，但是為了確保svg是彈性的，可以使用CSS的百分比做為單位來(lái)覆蓋默認(rèn)的尺寸。如果你感興趣，可以點(diǎn)擊這里學(xué)習(xí)如何實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)的SVG。

在這個(gè)示例中使用linearGradient給元素定義需要的紋理，同時(shí)給這個(gè)漸變linearGradient設(shè)置一個(gè)#id，然后通過(guò)fill屬性將漸變紋理用在元素上。這樣是不是更具語(yǔ)義呢？

這是上面代碼的效果：

紋理可以是任何東西，哪怕是SVG的元素引用的外部圖像(JPEG、PNG和GIF圖像等)。它也可以是一個(gè)SVG的元素。

因?yàn)镾VG是一個(gè)圖形，為了方便屏幕閱讀器能讀到，一定要給其定義一個(gè)title。中的這個(gè)title就相當(dāng)于元素的alt屬性。

背景紋理填充文本(使用混合模式)

類似前面的技術(shù)，將CSS的mask和SVG的結(jié)合起來(lái)，可以將紋理填充到SVG的元素上。在填充之前，首先要做的是定義一個(gè)紋理。在SVG中可以使用定義紋理，并且在元素上使用mask屬性替代fill屬性，將定義的紋理填充到文本中。

在下面這個(gè)示例中，我們制作了一個(gè)類似于被咬過(guò)的文本效果，如下圖所示：

使用SVG制作一個(gè)咬痕的紋理，并且應(yīng)用到一個(gè)文本之上。

首先通過(guò)圖形編輯器制作一個(gè)咬痕的紋理，為了達(dá)到需要的效果，先在文本上添加需要的效果。它助于你在想要的地方得到你需要的效果。

然后，將圖形導(dǎo)出成SVG，并且將圖形的蒙板放在元素內(nèi)，導(dǎo)出的代碼如下所示：

nom

nom

nom

有一點(diǎn)需要特別的注意：在SVG中不像CSS的，蒙板元素需要填充白色，而不是黑色。黑色和白色之間的任何值都將呈現(xiàn)為半透明狀態(tài)，如此一來(lái)，元素越接白色(#ffffff)，蒙板越不透明，蒙板的顏色越接近黑色(#000000)，越接近透明。

因此，在上面的例子中，給咬過(guò)的形狀填充為黑色，而整個(gè)SVG元素填充的是白色，這是為了確保文本在畫布的任何地方都可以顯示，除了黑色的咬痕之處不顯示。

上面的示例代碼，在瀏覽器上的效果看起來(lái)像這樣：

這里你要做的僅是在SVG中將需要的紋理填充到文本上。你可以使用一個(gè)漸變、圖像或其他任何形狀或模式來(lái)填充你的文本。在元素上你有很多的選擇項(xiàng)，也可以創(chuàng)建很多有趣的效果，比如動(dòng)畫紋理填充。

使用SVG制作動(dòng)畫紋理填充

SVG不僅為我們提供更好的支持和模塊化(因?yàn)槲谋竞推湫Ч及b在一起)，而且SVG還可以實(shí)現(xiàn)動(dòng)畫效果。

在SVG的元素內(nèi)，你可以給其定義一個(gè)填充(fill)時(shí)，也可以使用動(dòng)畫填充。這意味著，你將可以實(shí)現(xiàn)類似下圖的一些動(dòng)畫紋理填充文本的效果：

在上面的示例中，有一個(gè)是使用了GIF動(dòng)畫圖片做的填充，所以在文本的填充里也保持了GIF動(dòng)畫效果。

在Codrops我寫過(guò)一篇文章，主要闡述的就是如何使用SVG給文本創(chuàng)建動(dòng)畫紋理，如果你想了解更多的細(xì)節(jié)，可以仔細(xì)閱讀這篇文章。

總結(jié)

直到瀏覽器全面支持CSS的background-clip:text屬性之前，SVG絕對(duì)是創(chuàng)建紋理填充文本效果的最佳方法。

事實(shí)上，我個(gè)人仍然喜歡使用SVG創(chuàng)建動(dòng)畫，雖然CSS中有更好的動(dòng)畫功能。我喜歡這個(gè)的原因是，SVG可以將文本和效果封裝為一個(gè)圖形，這樣可以復(fù)制，也可以降級(jí)處理，更可以重用。更為重要的是，SVG的更具可讀性，更具語(yǔ)義，也可以完全選擇。

請(qǐng)持續(xù)關(guān)注CSS和SVG技術(shù)的比較，在下一篇文章中將繼續(xù)為大家闡述相關(guān)的技術(shù)，通過(guò)這些示例的比較，更好的幫助大家做出更好的選擇，決定選擇哪一種技術(shù)。

總結(jié)

以上是生活随笔為你收集整理的svg画css,CSS vs. SVG:图形文本的效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。