突襲HTML5之SVG 2D入門3 - 文本與圖像

SVG中渲染文本

　　SVG的強大能力之一是它可以將文本控制到標准HTML頁面不可能有的程度，而無須求助圖像或其它插件。任何可以在形狀或路徑上執行的操作（如繪制或濾鏡）都可以在文本上執行。盡管SVG的文本渲染如此強大，但是還是有一個不足之處：SVG不能執行自動換行。如果文本比允許空間長，則簡單地將它切斷。多數情況下，創建多行文本需要多個文本元素。
　　此外，可以使用 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元素可以設置下列的屬性：

• x,y是文本位置坐標。
• text-anchor是文本顯示的方向，其實也就是位置(x,y)處於文本的位置。這個屬性有start,middle和end三種值。
• start表示文本位置坐標(x,y)位於文本的開始處，文本從這點開始向右挨個顯示。
• middle表示(x,y)位於文本中間處，文本向左右兩個方向顯示，其實就是居中顯示。
• end表示(x,y)點位於文本結尾，文本向左挨個顯示。

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

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

  文本區間 - tspan元素
　　這個元素是text元素的強力補充；它用於渲染一個區間內的文本；它只能出現在text元素或者tspan元素的子元素中。典型的用法就是強調顯示部分文本。例如：

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

　　tspan元素有下列的屬性可以設置：

• x,y用於設置包含的文本的絕對坐標值，這個值會覆蓋默認的文本位置。這些屬性可以包含一系列數字，這些數字會應用到每個對應的單個字符。沒有對應設置的字符會緊跟前一個字符。例如：

< 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用於設置包含的文本相對於默認的文本位置的偏移量。這些屬性同樣可以包含一系列數字，每個都會應用到對應的字符。沒有對應設置的字符會緊跟前一個字符。你可以把上面的例子中的x換成dx看看效果。
• rotate用於設置字體的旋轉角度。這個屬性頁可以包含一系列數字，應用到每個字符。沒有對應設置的字符會使用最后設置的那個數字。

< 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：這是最令人費解的屬性，據說設置完以后，渲染發現文本的長度與這個值不一致時，會以這個長度為准。但是我沒有試出來效果。

  文本引用 - tref元素
　　這個元素允許引用定義過的文本，並高效的拷貝到當前位置，通常配合xlink:href指定目的元素。因為是拷貝過來的，所以使用css修改當前文本的時候，不會修改原來的文本。看例子：

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

 

  文本路徑 - textPath元素
　　這個比較有意思，效果也很酷，能做出很多的藝術效果；這個元素從它的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 
          > 
         

這里需要注意幾點：
1.如果沒有設置x或y坐標，則默認是0。

2.如果沒有設置width或height，則默認也是0.

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

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

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

實用參考：
腳本索引：http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
開發中心：https://developer.mozilla.org/en/SVG
熱門參考：http://www.chinasvg.com/
官方文檔：http://www.w3.org/TR/SVG11/