中文XML论坛--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 :
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="10cm" height="3cm" viewBox="0 0 1000 300"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example text01 - 'Hello, out there' in blue</desc>
  <text x="250" y="150"
        font-family="Verdana" font-size="55" fill="blue" >
    Hello, out there
  </text>
  
  <rect x="1" y="1" width="998" height="298"
        fill="none" stroke="blue" stroke-width="2" />
</svg>

效果展示：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

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="10cm" height="3cm" viewBox="0 0 1000 300"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example tspan01 - using tspan to change visual           attributes</desc>
  <g font-family="Verdana" font-size="45" >
    <text x="200" y="150" fill="blue" >
      You are
        <tspan font-weight="bold" fill="red" >not</tspan>
      a banana.
    </text>
  </g>
  
  <rect x="1" y="1" width="998" height="298"
        fill="none" stroke="blue" stroke-width="2" />
</svg>

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

Example tspan02

效果展示：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

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="10cm" height="3cm" viewBox="0 0 1000 300"
     xmlns="http://www.w3.org/2000/svg" version="1.1"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <text id="ReferencedText">
      Referenced character data
    </text>
  </defs>
  <desc>Example tref01 - inline vs reference text content</desc>
  <text x="100" y="100" font-size="45" fill="blue" >
    Inline character data
  </text>
  <text x="100" y="200" font-size="45" fill="red" >
    <tref xlink:href="#ReferencedText"/>
  </text>
  
  <rect x="1" y="1" width="998" height="298"
        fill="none" stroke="blue" stroke-width="2" />
</svg>

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

4.Text layout

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"   "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="10cm" height="5cm" viewBox="0 0 1000 500"     xmlns="http://www.w3.org/2000/svg" version="1.1"     xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
     <text id="myText">This is a test!</text>
</defs>
<desc>Example tref01 - inline vs reference text content</desc>
  <text font-size="60" fill="blue" font-family="Verdana">
     <tref xlink:href="#myText" x="20" y="50"/>
  </text>
    
   <text font-size="60" fill="blue" font-family="Verdana">
        <tref xlink:href="#myText" x="20" y="130"            glyph-orientation-horizontal="180"/>
  </text>
    
    <text font-size="60" fill="blue" font-family="Verdana">
       <tref xlink:href="#myText" x="20" y="210"            direction="rtl" unicode-bidi="bidi-override"/>
  </text>
  
  <text x="800" y="20" writing-mode="tb" font-size="60"         fill="blue" font-family="Verdana">
     This is a test!
  </text>
      <text x="900" y="20"  font-size="60" fill="blue"         font-family="Verdana"        writing-mode="tb" glyph-orientation-vertical="270">
     This is a test!
  </text>
  
  <rect x="1" y="1" width="998" height="498"        fill="none" stroke="blue" stroke-width="2" />
</svg>
自己保存成.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-size' <absolute-size> | <relative-size> |<length> | <percentage> | inherit

7.Spacing properties
'kerning' auto | <length> | inherit

'letter-spacing' normal | <length> | inherit

'word-spacing' normal | <length> | inherit

8.Text decoration

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

Example textdecoration01

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example textdecoration01 - behavior of 'text-decoration'         property</desc>
  <rect x="1" y="1" width="1198" height="398"         fill="none" stroke="blue" stroke-width="2" />
  <g font-size="60" fill="blue" stroke="red" stroke-width="1" >
    <text x="100" y="75">Normal text</text>
    <text x="100" y="165" text-decoration="line-through" >        Text with line-through    </text>
    <text x="100" y="255" text-decoration="underline" >        Underlined text    </text>
    <text x="100" y="345" text-decoration="underline" >
      <tspan>One </tspan>
      <tspan fill="yellow" stroke="purple" >word </tspan>
      <tspan fill="yellow" stroke="black" >has </tspan>
      <tspan fill="yellow" stroke="darkgreen"              text-decoration="underline" >different </tspan>
      <tspan fill="yellow" stroke="blue" >underlining</tspan>
    </text>
  </g>
</svg>

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

9.text on path

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

Example toap01

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="3.6cm" viewBox="0 0 1000 300"      version="1.1" xmlns=http://www.w3.org/2000/svg      xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <path id="MyPath"
          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" />
  </defs>
  <desc>Example toap02 - tspan within textPath</desc>
  <use xlink:href="#MyPath" fill="none" stroke="red"  />
  <text font-family="Verdana" font-size="42.5" fill="blue" >
    <textPath xlink:href="#MyPath">
      We go
      <tspan dy="-30" fill="red" >
        up
      </tspan>
      <tspan dy="30">
        ,
      </tspan>
      then we go down, then up again
    </textPath>
  </text>
  
  <rect x="1" y="1" width="998" height="298"
        fill="none" stroke="blue" stroke-width="2" />
</svg>

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

10.White space handling

xml:space default|preserve


	W 3 C h i n a ( since 2003 ) 旗下站点苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》	7,109.375ms