Text-svg元素詳解

whli88 2007-09-06

展開全文

本文為Scalable Vector Graphics (SVG) 1.1 Specification中text部分，學(xué)習(xí)筆記。

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

1.The 'text' element

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

x,y表示文本的橫縱坐標(biāo)。

dx,dy表示移動(dòng)的橫縱坐標(biāo)。

rotate表示旋轉(zhuǎn)的度數(shù)。

Example text01 :

<?xml version="1.0" standalone="no"?>
            <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
            "http://www./Graphics/SVG/1.1/DTD/svg11.dtd">
            <svg width="10cm" height="3cm" viewBox="0 0 1000 300"
            xmlns="http://www./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>
            <!-- Show outline of canvas using 'rect' element -->
            <rect x="1" y="1" width="998" height="298"
            fill="none" stroke="blue" stroke-width="2" />
            </svg>

效果展示：http://www./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./Graphics/SVG/1.1/DTD/svg11.dtd">
            <svg width="10cm" height="3cm" viewBox="0 0 1000 300"
            xmlns="http://www./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>
            <!-- Show outline of canvas using 'rect' element -->
            <rect x="1" y="1" width="998" height="298"
            fill="none" stroke="blue" stroke-width="2" />
            </svg>

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

Example tspan02

                        <?xml version="1.0" standalone="no"?>
            <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
            "http://www./Graphics/SVG/1.1/DTD/svg11.dtd">
            <svg width="10cm" height="3cm" viewBox="0 0 1000 300"
            xmlns="http://www./2000/svg" version="1.1">
            <desc>Example tspan02 - using tspan's dx and dy attributes
            for incremental positioning adjustments</desc>
            <g font-family="Verdana" font-size="45" >
            <text x="200" y="150" fill="blue" >
            But you
            <tspan dx="2em" dy="-50" font-weight="bold" fill="red" >
            are
            </tspan>
            <tspan dy="100">
            a peach!
            </tspan>
            </text>
            </g>
            <!-- Show outline of canvas using 'rect' element -->
            <rect x="1" y="1" width="998" height="298"
            fill="none" stroke="blue" stroke-width="2" />
            </svg>

效果展示：http://www./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

文本內(nèi)容可以用text元素直接包含進(jìn)來，或者用tref元素引用進(jìn)來。

主要屬性有：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./Graphics/SVG/1.1/DTD/svg11.dtd">
            <svg width="10cm" height="3cm" viewBox="0 0 1000 300"
            xmlns="http://www./2000/svg" version="1.1"
            xmlns:xlink="http://www./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>
            <!-- Show outline of canvas using 'rect' element -->
            <rect x="1" y="1" width="998" height="298"
            fill="none" stroke="blue" stroke-width="2" />
            </svg>
            <?xml version="1.0" standalone="no"?>
            <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
            "http://www./Graphics/SVG/1.1/DTD/svg11.dtd">
            <svg width="10cm" height="3cm" viewBox="0 0 1000 300"
            xmlns="http://www./2000/svg" version="1.1"
            xmlns:xlink="http://www./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>
            <!-- Show outline of canvas using 'rect' element -->
            <rect x="1" y="1" width="998" height="298"
            fill="none" stroke="blue" stroke-width="2" />
            </svg>
            <?xml version="1.0" standalone="no"?>
            <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
            "http://www./Graphics/SVG/1.1/DTD/svg11.dtd">
            <svg width="10cm" height="3cm" viewBox="0 0 1000 300"
            xmlns="http://www./2000/svg" version="1.1"
            xmlns:xlink="http://www./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>
            <!-- Show outline of canvas using 'rect' element -->
            <rect x="1" y="1" width="998" height="298"
            fill="none" stroke="blue" stroke-width="2" />
            </svg>

效果展示：http://www./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'自元素中將忽略。

當(dāng)文字豎排時(shí)，可以用'glyph-orientation-vertical' 屬性來具體設(shè)置

'glyph-orientation-vertical' auto | <angle> | inherit

當(dāng)文字橫排時(shí)，可以用'glyph-orientation-horizontal' 屬性來具體設(shè)置

'glyph-orientation-horizontal' <angle> | inherit

以上兩屬性的angle只能是90的倍數(shù)

'direction' ltr | rtl | inherit

direction屬性設(shè)置文本的排列方式。

要使direction屬性生效，'unicode-bidi' 屬性的值必須為'embed' 或者 'bidi-override'.

'unicode-bidi' normal | embed | bidi-override | inherit

unicode-bidi屬性設(shè)置文本的雙向方式。

Example layout01

                                                             
            <?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www./Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="10cm" height="5cm" viewBox="0 0 1000 500"
     xmlns="http://www./2000/svg" version="1.1"
     xmlns:xlink="http://www./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>
  
  <!-- 文字水平排列時(shí)，利用
          glyph-orientation-horizontal屬性來設(shè)置文字layout -->  
              <text font-size="60" fill="blue" font-family="Verdana">
     <tref xlink:href="#myText" x="20" y="130" 
           glyph-orientation-horizontal="180"/>
  </text>
  
  <!-- 當(dāng)unicode-bidi屬性值為embed或bidi-override時(shí)，
       利用direction來設(shè)置文字layout --> 
 
  <text font-size="60" fill="blue" font-family="Verdana">
     <tref xlink:href="#myText" x="20" y="210" 
           direction="rtl" unicode-bidi="bidi-override"/>
  </text>
              <!-- 利用writing-mode屬性設(shè)置文字layout -->
              <text x="800" y="20" writing-mode="tb" font-size="60" 
        fill="blue" font-family="Verdana">
     This is a test!
  </text>
              <!-- 文字豎直排列時(shí)，
                   利用glyph-orientation-vertical屬性來設(shè)置文字layout --> 
              <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>
              <!-- Show outline of canvas using 'rect' element -->
              <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設(shè)置文本的排列屬性。

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./Graphics/SVG/1.1/DTD/svg11.dtd">
            <svg width="12cm" height="4cm" viewBox="0 0 1200 400"
            xmlns="http://www./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./TR/SVG11/images/text/textdecoration01.svg

9.text on path

主要屬性有：startOffset,textLength,lengthAdjust,method,spacing
startOffset設(shè)置文字開始的位置。startOffset = "<length>"
method設(shè)置文字與路徑的位置關(guān)系。method = "align | stretch" align為默認(rèn)值。
spacing設(shè)置文字與路徑的空間。spacing = "auto | exact" exact為默認(rèn)值。
xlink:href設(shè)置綁定的路徑。

Example toap01

                                                <?xml version="1.0" standalone="no"?>
            <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
            "http://www./Graphics/SVG/1.1/DTD/svg11.dtd">
            <svg width="12cm" height="3.6cm" viewBox="0 0 1000 300" 
     version="1.1" xmlns=http://www./2000/svg 
     xmlns:xlink="http://www./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>
            <!-- Show outline of canvas using 'rect' element -->
            <rect x="1" y="1" width="998" height="298"
            fill="none" stroke="blue" stroke-width="2" />
            </svg>

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

10.White space handling

xml:space default|preserve

本站是提供個(gè)人知識管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來自： whli88 > 《SVG》

舉報(bào)/認(rèn)領(lǐng)