點評：SVG的強大能力之一是它可以將文本控制到標準HTML頁面不可能有的程度，而無須求助圖像或其它插件,盡管SVG的文本渲染如此強大，但是還是有一個不足之處：SVG不能執行自動換行,接下來介紹SVG中渲染文本,感興趣的朋友可以了解下，或許有所幫助
SVG中渲染文本
SVG的強大能力之一是它可以將文本控制到標準HTML頁面不可能有的程度，而無須求助圖像或其它插件。任何可以在形狀或路徑上執行的操作（如繪制或濾鏡）都可以在文本上執行。盡管SVG的文本渲染如此強大，但是還是有一個不足之處：SVG不能執行自動換行。如果文本比允許空間長，則簡單地將它切斷。多數情況下，創建多行文本需要多個文本元素。
此外，可以使用 tspan 元素可以將文本元素分成幾部分，允許每部分有各自的樣式。
還有，在text元素中，空格的處理與HTML類似：換行和回車變成空格，而多個空格壓縮成單個空格。
直接顯示在圖片中的文本 - text元素
直接顯示文本，可以使用text元素，例子如下：
復制代碼
代碼如下:
<svg>
<rect 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>
除了這些屬性，下面的這些屬性都既可以在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。復制代碼
代碼如下:
<text>
<tspan font-weight="bold" fill="red">This is bold and red</tspan>
</text>
復制代碼
代碼如下:
<text x="10" y="10">Hello World!
<tspan x="100 200 300" font-weight="bold" fill="red">This is bold and red</tspan>
</text>
復制代碼
代碼如下:
<text x="10" y="10">Hello World!
<tspan rotate="10 20 45" font-weight="bold" fill="red">This is bold and red</tspan>
</text>
文本引用 - tref元素
這個元素允許引用定義過的文本，并高效的拷貝到當前位置，通常配合xlink:href指定目的元素。因為是拷貝過來的，所以使用css修改當前文本的時候，不會修改原來的文本?？蠢樱?br />
復制代碼
代碼如下:
<text>This is an example text.</text>
<text>
<tref xlink:href="#example" />
</text>
復制代碼
代碼如下:
<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 xlink:href="Penguins.jpg" x="0" y="0"/>
</svg>
2.如果沒有設置width或height，則默認也是0.
3.如果顯式的設置width或height為0，則會禁止渲染這幅圖片。
4.圖片的格式支持png,jpeg,jpg,svg等等，所以svg是支持嵌套svg的。
5.image與其他元素一樣，是svg的常規元素，所以它支持所有的裁剪，蒙板，濾鏡，旋轉等效果。
實用參考：
腳本索引：(v=vs.85).aspx
開發中心：https://developer.mozilla.org/en/SVG
熱門參考：
官方文檔：
新聞熱點
疑難解答
