HTML5之SVG 2D入門3—文字與影像及渲染文字介紹_html5教學技巧

SVG中渲染文字

SVG的強大能力之一是它可以將文字控製到標準HTML頁面不可能有的程度，而無須求助圖像或其它插件。任何可以在形狀或路徑上執行的操作（如繪製或濾鏡）都可以在文字上執行。儘管SVG的文字渲染如此強大，但還是有一個不足之處：SVG不能執行自動換行。如果文字比允許空間長，則簡單地將它切斷。多數情況下，建立多行文字需要多個文字元素。
此外，可以使用 tspan 元素可以將文字元素分成幾個部分，允許每個部分有各自的樣式。

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

直接顯示在圖片中的文本- text元素
直接顯示文本，可以使用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元素的子元素中。典型的用法就是強調顯示部分文字。例如：

複製程式碼

程式碼如下:

This is bold and red

tspan元素有下列的屬性可以設定：x, y用於設定包含的文字的絕對座標值，這個值會覆蓋預設的文字位置。這些屬性可以包含一系列數字，這些數字會套用到每個對應的單一字元。沒有對應設定的字元會緊跟著前一個字元。例如：

複製程式碼

程式碼如下:

Hello World!
This is bold and red

dx,dy用於設定包含的文字相對於預設的文字位置的偏移量。這些屬性同樣可以包含一系列數字，每個數字都會套用到對應的字元。沒有對應設定的字元會緊跟著前一個字元。你可以把上面的例子中的x換成dx看看效果。 rotate用於設定字體的旋轉角度。這個屬性頁可以包含一系列數字，應用到每個字元。沒有對應設定的字元會使用最後設定的那個數字。

複製程式碼

程式碼如下:

程式碼如下:

"10">Hello World! This is bold and red
textLength：這是最令人費解的屬性，據說設定完以後，渲染發現文字的長度與這個值不一致時，會以這個長度為準。但是我沒有試出來效果。

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

複製程式碼

程式碼如下:

程式碼如下:


This is an example text.

 

文字路徑- textPath元素

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

複製代碼

代碼如下:

This text follows a curve.


SVG中渲染圖片- image元素

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

複製程式碼

程式碼如下:

程式碼如下:
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/