`

Text-svg元素详解

    博客分类：
  • SVG
SVG 
阅读更多

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

分享到：
| JavaScript删除子节点的方法[转]
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    html5轻量级操纵和制作SVG动画的js库-svg.js

    2. **SVG元素操作**：SVG.js支持对SVG元素的各种操作，包括添加、删除、移动、缩放、旋转和改变颜色等。这些操作通过简洁的语法实现，如`element.move(x, y)`将元素移动到指定位置。 3. **文本处理**：库提供了处理...

    SVG元素和代码解释

    ### SVG元素和代码详解 #### 一、图形元素 SVG（Scalable Vector Graphics）是一种基于XML的矢量图形格式，被广泛应用于Web开发中。SVG中的**图形元素**是用于绘制各种形状的基础构建块，主要包括矩形、圆形、椭圆...

    SVG元素avg elements

    ### SVG元素详解 #### 1. 元素模块概述 SVG（Scalable Vector Graphics）是一种基于XML的矢量图像格式，它不仅支持矢量图形的创建和展示，还提供了丰富的交互性和动态特性。SVG中的元素是其核心组成部分，通过这些...

    css3 svg文字轮廓边框特效.zip

    例如，使用jQuery可以方便地控制SVG元素的显示和隐藏，以及响应用户的交互事件。 ```javascript $(document).ready(function() { $('#myText').click(function() { $(this).find('text').toggleClass('highlight'...

    Html5新增元素详解.pptx

    Html5新增元素详解 Html5新增元素详解是 Html5 中的一些新的元素和废除的元素的介绍。Html5 中的新元素包括结构元素、行内语义元素、块级语义元素、input 元素的类型、多媒体元素和交互性元素等。 Html5 中的一些...

    svg雷达图效果，js技术

    1. **DOM操作**：通过`document.getElementById`、`querySelector`等方法获取SVG元素，然后使用`setAttribute`改变属性值，如颜色、大小等。 2. **事件监听**：添加`addEventListener`来响应用户的点击、鼠标移动等...

    CSS3 SVG 3D立体阴影文字动画特效

    在实际项目中，`index.html`文件是页面的主体，包含HTML结构和SVG元素；`css`文件则是样式表，包含了所有CSS3和SVG的样式规则；而`js`文件则可能包含了处理动画逻辑的JavaScript代码，例如事件监听和动画效果的实现...

    SVG精髓++第2版

    - **JavaScript动画**：利用JavaScript的定时器功能或者请求动画帧API (`requestAnimationFrame`) 来动态修改SVG元素的属性值，实现更复杂和交互式的动画。 #### 五、SVG优化技巧 为了提高SVG图像的加载速度和渲染...

    Svg特殊字符

    ### SVG特殊字符详解 SVG（Scalable Vector Graphics）是一种基于XML的矢量图像格式，用于描述二维图形和图形应用。SVG支持丰富的图形元素、文本处理以及与图像相关的特性和功能。在SVG文档中，使用特殊字符对于...

    svg帮助（一些小例子）

    - **动画`&lt;animate&gt;`**：为SVG元素添加动画效果。 #### 五、SVG的应用场景 - **图标和按钮**：由于SVG图像可自定义性强且易于缩放，因此非常适合制作网站中的图标和按钮。 - **数据可视化**：利用SVG的数据驱动...

    vue项目里面引用svg文件并给svg里面的元素赋值

    直接将SVG代码嵌入Vue模板中的优点在于可以直接利用Vue的动态绑定功能，如`:fill`或`:class`来改变SVG元素的样式。而通过`&lt;img&gt;`标签引入SVG文件虽然简单，但无法动态修改SVG内部元素的属性。 #### 三、避免引入SVG...

    Html新增元素详解PPT教案.pptx

    `&lt;svg&gt;`元素支持矢量图形；`&lt;embed&gt;`和`&lt;object&gt;`元素用于嵌入外部内容。 8. **废除的元素**： 一些在HTML4中使用的元素在HTML5中被废除，如`&lt;frameset&gt;`、`&lt;frame&gt;`、`&lt;center&gt;`等，因为它们不利于语义化和可访问...

    spanningpeeps:玩svg元素和进行跨度黑客马拉松

    【SVG元素详解】 SVG，全称Scalable Vector Graphics，是一种用于描述二维图形的XML标记语言。SVG图像可通过脚本语言进行动态修改，这使得它在网页设计中扮演着重要角色，尤其适用于需要高分辨率、可放大的图形，如...

    jQuery+html5 svg功率仪表盘代码

    例如，使用CSS选择器定位特定的SVG元素，然后通过`style`属性来改变元素的外观。 6. **JavaScript逻辑**： JavaScript部分主要包含两个功能：一是初始化仪表盘，设置默认值；二是响应用户输入，动态更新仪表盘。...

    css与html标签详解.docx

    【CSS与HTML标签详解】 CSS（层叠样式表）是一种用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式语言。它允许我们通过分离内容和表现来设计网页，使得网页的布局和外观更加灵活和可控。 **CSS...

    学习SVG图形知识的教程

    ### SVG图形知识详解 ...路径（`&lt;path&gt;`）是最具灵活性的SVG元素之一，可以用来绘制任何形状。路径定义通过一系列的移动（move）、线（line）、曲线（curve）等命令组成。 **示例**：绘制一个简单的三角形： ```xml ...

    描述SVG结构 Multimedia Information System

    7. **文本**：SVG可以直接包含文本元素 `&lt;text&gt;`，并可以调整字体、大小、颜色等属性。 8. **图层**：`&lt;g&gt;`（群组）元素可用于组织和分组多个图形，实现图层效果。 9. **链接与交互**：SVG图形可以添加`href`属性...

    SVG文档语法结构.pdf

    ### SVG文档语法结构详解 SVG（Scalable Vector Graphics）是一种基于XML的矢量图形标记语言，用于描述二维矢量图形及其行为。SVG文件能够适应不同的屏幕尺寸，并且可以无损地缩放，因此在网页设计和其他矢量图形...

    Text-Formatting-Animation:这段代码是一个JavaScript动画，它通过使用文本格式标记而不是CSS属性来更改文本格式。

    这些HTML元素可能是简单的`&lt;p&gt;`段落，或者是`&lt;div&gt;`容器，甚至是自定义的`&lt;svg&gt;`元素来实现更丰富的视觉效果。 在压缩包中的"Text-Formatting-Animation-main"文件中，可能包含了项目的源代码，包括HTML文件、...

Magicbox
Global site tag (gtag.js) - Google Analytics