Text-svg元素详解

http://www.eramx.com/forum/printthread.php?p=2494

Text-svg元素详解
 

本文为Scalable Vector Graphics (SVG) 1.1 Specification中text部分，学习笔记。

http://www.w3.org/TR/SVG11/text.html#TextElement

1.The 'text' element

主要属性有：x,y,dx,dy,rotate,textLength,lengthAdjust

x,y表示文本的横纵坐标。

dx,dy表示移动的横纵坐标。

rotate表示旋转的度数。

Example text01 :

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

Example text01 - 'Hello, out there' in blue
font-family="Verdana" font-size="55" fill="blue" >
Hello, out there


fill="none" stroke="blue" stroke-width="2" />




效果展示： http://www.w3.org/TR/SVG11/images/text/text01.svg

2.tspan元素

Within a 'text' element, text and font properties and the current text position can be adjusted with absolute or relative coordinate values by including a 'tspan' element.

主要属性有：x,y,dx,dy,rotate,textLength,lengthAdjust

属性解释同上。

Example tspan01


"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

Example tspan01 - using tspan to change visual attributes


You are
not
a banana.



fill="none" stroke="blue" stroke-width="2" />



效果展示： http://www.w3.org/TR/SVG11/images/text/tspan01.svg

Example tspan02


"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

Example tspan02 - using tspan's dx and dy attributes
for incremental positioning adjustments


But you

are


a peach!




fill="none" stroke="blue" stroke-width="2" />


效果展示： http://www.w3.org/TR/SVG11/images/text/tspan02.svg

3.tref元素

The textual content for a 'text' can be either character data directly embedded within the 'text' element or the character data content of a referenced element, where the referencing is specified with a 'tref' element

文本内容可以用text元素直接包含进来，或者用tref元素引用进来。

主要属性有：x,y,dx,dy,rotate,textLength,lengthAdjust,xlink:href

xlink:href属性指定引用的url。其他属性同上。

Example tref01


"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

xmlns:xlink="http://www.w3.org/1999/xlink">


Referenced character data


Example tref01 - inline vs reference text content

Inline character data





fill="none" stroke="blue" stroke-width="2" />




"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

xmlns:xlink="http://www.w3.org/1999/xlink">


Referenced character data


Example tref01 - inline vs reference text content

Inline character data





fill="none" stroke="blue" stroke-width="2" />



"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

xmlns:xlink="http://www.w3.org/1999/xlink">


Referenced character data


Example tref01 - inline vs reference text content

Inline character data





fill="none" stroke="blue" stroke-width="2" />


效果展示： http://www.w3.org/TR/SVG11/images/text/tref01.svg

4.Text layout

'writing-mode' lr-tb | rl-tb | tb-rl | lr | rl | tb | inherit
本属性仅仅用于text元素，在 'tspan', 'tref', 'altGlyph' 和 'textPath'自元素中将忽略。
当文字竖排时，可以用'glyph-orientation-vertical' 属性来具体设置
'glyph-orientation-vertical' auto | | inherit
当文字横排时，可以用'glyph-orientation-horizontal' 属性来具体设置
'glyph-orientation-horizontal' | inherit
以上两属性的angle只能是90的倍数

'direction' ltr | rtl | inherit
direction属性设置文本的排列方式。
要使direction属性生效，'unicode-bidi' 属性的值必须为'embed' 或者 'bidi-override'.
'unicode-bidi' normal | embed | bidi-override | inherit
unicode-bidi属性设置文本的双向方式。
Example layout01





This is a test!

Example tref01 - inline vs reference text content













This is a test!


This is a test!




自己保存成.svg观看效果。文中有中文注释，所以可能要保存utf-8格式，方可正常显示。

5.Alignment properties

'text-anchor' start | middle | end | inherit

text-anchor设置文本的排列属性。

6.Font selection properties

'font-family'

'font-style' normal | italic | oblique | inherit

'font-variant' normal | small-caps | inherit

'font-weight' normal | bold | bolder | lighter | 100 | 200 | 300| 400 | 500 | 600 | 700 | 800|
900 | inherit

'font-stretch' normal | wider | narrower |ultra-condensed | extra-condensed |condensed |
semi-condensed |semi-expanded | expanded |extra-expanded | ultra-expanded |
inherit

'font-size' | | | | inherit

7.Spacing properties
'kerning' auto | | inherit

'letter-spacing' normal | | inherit

'word-spacing' normal | | inherit

8.Text decoration

'text-decoration' none | [ underline || overline || line-through || blink ] | inherit

Example textdecoration01


"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

Example textdecoration01 - behavior of 'text-decoration' property


Normal text
Text with line-through
Underlined text

One
word
has
different
underlining




效果展示： http://www.w3.org/TR/SVG11/images/te...coration01.svg

9.text on path

主要属性有：startOffset,textLength,lengthAdjust,method,spacing
startOffset设置文字开始的位置。startOffset = ""
method设置文字与路径的位置关系。method = "align | stretch" align为默认值。
spacing设置文字与路径的空间。spacing = "auto | exact" exact为默认值。
xlink:href设置绑定的路径。

Example toap01


"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">


d="M 100 200
C 200 100 300 0 400 100
C 500 200 600 300 700 200
C 800 100 900 100 900 100" />

Example toap02 - tspan within textPath



We go

up


,

then we go down, then up again



fill="none" stroke="blue" stroke-width="2" />


效果展示： http://www.w3.org/TR/SVG11/images/text/toap02.svg

10.White space handling

xml:space default|preserve