zoukankan      html  css  js  c++  java
  • 转: Text-svg元素详解

     
    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>
    <!-- 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.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>
    <!-- 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.w3.org/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.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 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.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>
    <!-- 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.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>
    <!-- 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.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>
    <!-- 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.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 | <angle> | inherit 
    当文字横排时,可以用'glyph-orientation-horizontal' 属性来具体设置 
    'glyph-orientation-horizontal' <angle> | 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

    <?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>
    <!-- 文字水平排列时,利用 glyph-orientation-horizontal属性来设置文layout -->
    <text font-size="60" fill="blue" font-family="Verdana">
    <tref xlink:href="#myText" x="20" y="130" glyph-orientation-horizontal="180"/>
    </text>
    <!-- 当unicode-bidi属性值为embed或bidi-override时, 利用direction来设置文字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属性设置文字layout -->
    <text x="800" y="20" writing-mode="tb" font-size="60" fill="blue" font-family="Verdana">
    This is a test!
    </text> 
    <!-- 文字竖直排列时, 利用glyph-orientation-vertical属性来设置文字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设置文本的排列属性。

    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' <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/te...coration01.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>
    <!-- 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.w3.org/TR/SVG11/images/text/toap02.svg

    10.White space handling

    xml:space default|preserve
  • 相关阅读:
    GitLab 介绍
    git 标签
    git 分支
    git 仓库 撤销提交 git reset and 查看本地历史操作 git reflog
    git 仓库 回退功能 git checkout
    python 并发编程 多进程 练习题
    git 命令 查看历史提交 git log
    git 命令 git diff 查看 Git 区域文件的具体改动
    POJ 2608
    POJ 2610
  • 原文地址:https://www.cnblogs.com/snowbaby-kang/p/3886734.html
Copyright © 2011-2022 走看看