日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢(xún)
選擇下列產(chǎn)品馬上在線(xiàn)溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
HTML5中SVG2D文本與圖像

SVG中渲染文本

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

此外，可以使用 tspan 元素可以將文本元素分成幾部分，允許每部分有各自的樣式。

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

直接顯示在圖片中的文本 - text元素

直接顯示文本，可以使用text元素，例子如下：

 
 
 
    
  
  
  
  1.    
    2. 
  
  
  
  2.      
    3. 
  
  
  
  3.      
    4. 
  
  
  
  4.   SVG   
    5. 
  
  
  
  5.   
    6.

如上面的例子中所示，text元素可以設(shè)置下列的屬性：

x,y是文本位置坐標(biāo)。

text-anchor是文本顯示的方向，其實(shí)也就是位置(x,y)處于文本的位置。這個(gè)屬性有start,middle和end三種值。

start表示文本位置坐標(biāo)(x,y)位于文本的開(kāi)始處，文本從這點(diǎn)開(kāi)始向右挨個(gè)顯示。

middle表示(x,y)位于文本中間處，文本向左右兩個(gè)方向顯示，其實(shí)就是居中顯示。

end表示(x,y)點(diǎn)位于文本結(jié)尾，文本向左挨個(gè)顯示。

除了這些屬性，下面的這些屬性都既可以在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元素

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

 
 
 
    
  
  
  
    2. 
  
  
  
  2.   This is bold and red
    3. 
  
  
  
  3.

tspan元素有下列的屬性可以設(shè)置：

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

 
 
 
    
  
  
  
  1. Hello World! 
    2. 
  
  
  
  2.   This is bold and red
    3. 
  
  
  
  3.

dx,dy用于設(shè)置包含的文本相對(duì)于默認(rèn)的文本位置的偏移量。這些屬性同樣可以包含一系列數(shù)字，每個(gè)都會(huì)應(yīng)用到對(duì)應(yīng)的字符。沒(méi)有對(duì)應(yīng)設(shè)置的字符會(huì)緊跟前一個(gè)字符。你可以把上面的例子中的x換成dx看看效果。

rotate用于設(shè)置字體的旋轉(zhuǎn)角度。這個(gè)屬性頁(yè)可以包含一系列數(shù)字，應(yīng)用到每個(gè)字符。沒(méi)有對(duì)應(yīng)設(shè)置的字符會(huì)使用***設(shè)置的那個(gè)數(shù)字。

 
 
 
    
  
  
  
  1. Hello World! 
    2. 
  
  
  
  2.  This is bold and red
    3. 
  
  
  
  3.

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

文本引用 - tref元素

這個(gè)元素允許引用定義過(guò)的文本，并高效的拷貝到當(dāng)前位置，通常配合x(chóng)link:href指定目的元素。因?yàn)槭强截愡^(guò)來(lái)的，所以使用css修改當(dāng)前文本的時(shí)候，不會(huì)修改原來(lái)的文本。看例子：

 
 
 
    
  
  
  
  1. This is an example text.
    2. 
  
  
  
    3. 
  
  
  
  3.     
    4. 
  
  
  
  4.

文本路徑 - textPath元素

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

 
 
 
    
  
  
  
    2. 
  
  
  
    3. 
  
  
  
  3.   This text follows a curve.
    4. 
  
  
  
  4.

SVG中渲染圖片 - image元素

SVG中的image元素可以直接支持顯示光柵圖片，使用很簡(jiǎn)單?？聪旅娴睦樱?/p>

 
 
 
    
  
  
  
    2. 
  
  
  
  2.   
    3. 
  
  
  
  3.

這里需要注意幾點(diǎn)：

1.如果沒(méi)有設(shè)置x或y坐標(biāo)，則默認(rèn)是0。

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

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

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

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

實(shí)用參考：

腳本索引：http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx

開(kāi)發(fā)中心：https://developer.mozilla.org/en/SVG

熱門(mén)參考：http://www.chinasvg.com/

官方文檔：http://www.w3.org/TR/SVG11/

原文地址：http://www.cnblogs.com/dxy1982/archive/2012/04/09/2395728.html


本文標(biāo)題：HTML5中SVG2D文本與圖像
網(wǎng)頁(yè)路徑：http://www.dlmjj.cn/article/cohegse.html