這篇文章給大家介紹HTML5 SVG中的文本與圖像及渲染文本介紹是怎樣的，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

專注于為中小企業(yè)提供成都網(wǎng)站制作、網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)寧明免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了上千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

SVG中渲染文本

SVG的強(qiáng)大能力之一是它可以將文本控制到標(biāo)準(zhǔn)HTML頁面不可能有的程度，而無須求助圖像或其它插件。任何可以在形狀或路徑上執(zhí)行的操作（如繪制或?yàn)V鏡）都可以在文本上執(zhí)行。盡管SVG的文本渲染如此強(qiáng)大，但是還是有一個不足之處：SVG不能執(zhí)行自動換行。如果文本比允許空間長，則簡單地將它切斷。多數(shù)情況下，創(chuàng)建多行文本需要多個文本元素。
此外，可以使用 tspan 元素可以將文本元素分成幾部分，允許每部分有各自的樣式。

還有，在text元素中，空格的處理與HTML類似：換行和回車變成空格，而多個空格壓縮成單個空格。

直接顯示在圖片中的文本 - text元素
直接顯示文本，可以使用text元素，例子如下：

代碼如下:

<svg>  
 <rect width="300" height="200" fill="red" />  
 <circle cx="150" cy="100" r="80" fill="green" />  
 <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>  
</svg>

如上面的例子中所示，text元素可以設(shè)置下列的屬性：x,y是文本位置坐標(biāo)。text-anchor是文本顯示的方向，其實(shí)也就是位置(x,y)處于文本的位置。這個屬性有start,middle和end三種值。start表示文本位置坐標(biāo)(x,y)位于文本的開始處，文本從這點(diǎn)開始向右挨個顯示。middle表示(x,y)位于文本中間處，文本向左右兩個方向顯示，其實(shí)就是居中顯示。end表示(x,y)點(diǎn)位于文本結(jié)尾，文本向左挨個顯示。

除了這些屬性，下面的這些屬性都既可以在CSS中指定，也可以直接在屬性中指定:

fill,stroke：填充和描邊顏色，具體使用在后面總結(jié)。font的相關(guān)屬性：font-family, font-style, font-weight, font-variant, font-stretch, font-size, font-size-adjust, kerning, letter-spacing, word-spacing and text-decoration。

文本區(qū)間 - tspan元素
這個元素是text元素的強(qiáng)力補(bǔ)充；它用于渲染一個區(qū)間內(nèi)的文本；它只能出現(xiàn)在text元素或者tspan元素的子元素中。典型的用法就是強(qiáng)調(diào)顯示部分文本。例如：

代碼如下:

<text>
 <tspan font-weight="bold" fill="red">This is bold and red</tspan>
</text>

tspan元素有下列的屬性可以設(shè)置：x,y用于設(shè)置包含的文本的絕對坐標(biāo)值，這個值會覆蓋默認(rèn)的文本位置。這些屬性可以包含一系列數(shù)字，這些數(shù)字會應(yīng)用到每個對應(yīng)的單個字符。沒有對應(yīng)設(shè)置的字符會緊跟前一個字符。例如：

代碼如下:

<text x="10" y="10">Hello World!
 <tspan x="100 200 300"  font-weight="bold" fill="red">This is bold and red</tspan>
</text>

dx,dy用于設(shè)置包含的文本相對于默認(rèn)的文本位置的偏移量。這些屬性同樣可以包含一系列數(shù)字，每個都會應(yīng)用到對應(yīng)的字符。沒有對應(yīng)設(shè)置的字符會緊跟前一個字符。你可以把上面的例子中的x換成dx看看效果。rotate用于設(shè)置字體的旋轉(zhuǎn)角度。這個屬性頁可以包含一系列數(shù)字，應(yīng)用到每個字符。沒有對應(yīng)設(shè)置的字符會使用最后設(shè)置的那個數(shù)字。

代碼如下:

<text x="10" y="10">Hello World!
<tspan rotate="10 20 45"  font-weight="bold" fill="red">This is bold and red</tspan>
</text>

textLength：這是最令人費(fèi)解的屬性，據(jù)說設(shè)置完以后，渲染發(fā)現(xiàn)文本的長度與這個值不一致時，會以這個長度為準(zhǔn)。但是我沒有試出來效果。

文本引用 - tref元素
這個元素允許引用定義過的文本，并高效的拷貝到當(dāng)前位置，通常配合xlink:href指定目的元素。因?yàn)槭强截愡^來的，所以使用css修改當(dāng)前文本的時候，不會修改原來的文本?？蠢樱?/p>

代碼如下:

<text id="example">This is an example text.</text>
<text>
   <tref xlink:href="#example" />
</text>

 
文本路徑 - textPath元素
這個比較有意思，效果也很酷，能做出很多的藝術(shù)效果；這個元素從它的xlink:href屬性獲取指定的路徑并把文本對齊到這個路徑上，看例子：

代碼如下:

<path id="my_path" d="M 20,20 C 40,40 80,40 100,20" />
<text>
 <textPath xlink:href="#my_path">This text follows a curve.</textPath>
</text>

SVG中渲染圖片 - image元素
SVG中的image元素可以直接支持顯示光柵圖片，使用很簡單。看下面的例子：

代碼如下:

<svg width="5cm" height="4cm">
 <image xlink:href="Penguins.jpg" x="0" y="0" height="50px" width="50px"/>
</svg>

這里需要注意幾點(diǎn)：
1.如果沒有設(shè)置x或y坐標(biāo)，則默認(rèn)是0。

2.如果沒有設(shè)置width或height，則默認(rèn)也是0.

3.如果顯式的設(shè)置width或height為0，則會禁止渲染這幅圖片。

4.圖片的格式支持png,jpeg,jpg,svg等等，所以svg是支持嵌套svg的。

5.image與其他元素一樣，是svg的常規(guī)元素，所以它支持所有的裁剪，蒙板，濾鏡，旋轉(zhuǎn)等效果。

關(guān)于HTML5 SVG中的文本與圖像及渲染文本介紹是怎樣的就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

名稱欄目：HTML5SVG中的文本與圖像及渲染文本介紹是怎樣的-創(chuàng)新互聯(lián)
分享URL：http://aaarwkj.com/article46/dipchg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、靜態(tài)網(wǎng)站、網(wǎng)站排名、標(biāo)簽優(yōu)化、微信公眾號、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)