Text-svg元素详解
来源：互联网 发布：如何查询端口是否开放 编辑：程序博客网 时间：2024/05/21 16:56
字号：大 中 小 本文为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
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/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> <!-- 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
- Text-svg元素详解
- Text-svg元素详解
- SVG path 元素详解
- SVG path 元素详解
- SVG 中text元素显示中文
- SVG 元素
- SVG 元素
- SVG基础 | SVG PATH 元素
- d3js svg:text
- SVG 文本（text）
- SVG 文本（text）
- SVG中的动画元素
- SVG defs元素
- svg 创建文本 create text
- svg 动态修改text文本
- html5 svg文字text操作
- [交互式SVG组件]SVG元素拖拽
- SVG主要元素和属性
- 关于网站优化
- nrgrep函数分析(2)--搜索参数探讨
- nrgrep函数分析(3)--搜索实现分析
- 刷分
- malloc()与 alloc()区别
- Text-svg元素详解
- 用fork()和vfork()创建的进程各有何特点
- oracle数据文件内部BLOCK结构详解
- 网站的SEO优化
- GRASP模式总结
- java 中的 Enmu 的用法
- 001-0003 一些asp.net的学习文章
- oracle 分区概念介绍
- Java关键字new和newInstance方法的区别
