本文为Scalable Vector Graphics (SVG) 1.1 Specification中text部分,学习笔记。
http://www.w3.org/TR/SVG11/text.html#TextElement1.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.svg2.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.svgExample 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.svg3.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.svg4.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.svg9.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.svg10.White space handling
xml:space default|preserve
相关推荐
如何使用vite-svg-loader
赠送jar包:jaxb-svg11-1.0.2.jar; 赠送原API文档:jaxb-svg11-1.0.2-javadoc.jar; 赠送源代码:jaxb-svg11-1.0.2-sources.jar; 赠送Maven依赖信息文件:jaxb-svg11-1.0.2.pom; 包含翻译后的API文档:jaxb-svg11...
赠送jar包:jaxb-svg11-1.0.2.jar; 赠送原API文档:jaxb-svg11-1.0.2-javadoc.jar; 赠送源代码:jaxb-svg11-1.0.2-sources.jar; 赠送Maven依赖信息文件:jaxb-svg11-1.0.2.pom; 包含翻译后的API文档:jaxb-svg11...
PSD文件导出为SVG格式,save-ps-to-svg1.0.jsx 在PS的script目录中加入后,直接导出形状即可
react-native-svg-uri, 在来自URL或者 static 文件的本地响应中,呈现SVG图像 react-native-svg-uri从URL或者 static 文件中呈现来自React的SVG图像这是用 rn 0.33和 react-native-svg 4.3.1 ( 依赖于此库) react-...
支持 PhotoShop 将形状图片转化为 svg路径的脚本
支持 PhotoShop 将形状图片转化为 svg路径的脚本,文件放到 PS 安装目录下的 /Presets/Scripts 下
讨论: : 产品特点轻松渲染QR码图像(可选)嵌入徽标安卓的iOS安装安装依赖包yarn add react-native-svg react-native-qrcode-svg 要么npm i -S react-native-svg react-native-qrcode-svg 如果您使用的是React ...
让PS支持导出svg图片。 使用: 1.解压后放在PS安装目录的/Presets/Scripts 下; 2.打开/重启PS; 3.做好图后点文件-脚本-Save as SVG.
ps转储成svg的脚本(感觉不好用,建议下载Illustrator或最新版ps)
直接 PhotoShop 直接将形状文件转化导出为 SVG路径的脚本
Angular-ng-inline-svg.zip,用于在元素内联插入SVG文件的角度指令。ng-inline-svg,Angularjs于2016年发布,是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的依赖注入。angular的设计目的是全面解决开发...
这个工具有三种画图风格:FCNN、LeNet、AlexNet。
支持 PhotoShop 将形状图片转化为 svg路径的脚本 ps2017 cc ps 2018 cc 实测可用
前端开源库-gulp-svg2ttfgulp-svg2ttf,从svg字体创建ttf字体
型号NX-SVG 使用说明书 详细篇 第1章 概 要 对本机的概要、型号构成、各部分的名称及各部分的功能进行说明。 第2章 安装 对本机设置的环境、安装方法进行说明。 第3章 接 线 对本机的接线方法、接线时的注意事项、...
TK-SVG DSTATCOM说明书pdf,TK-SVG DSTATCOM说明书
山武NX-SVG软件包是山武NX-SVG网关设置与调试用的软件,可以做很方便的和其它通讯第三方通讯,省去PLC不少的通讯程序
react-svg-pan-zoom, 将平移和缩放特性添加到SVG的响应组件 react-svg-pan-zoom英镑react-svg-pan-zoom是一个反应组件,增加英镑pan和英镑的缩放特性,以英镑的SVG图像。 它有助于在小空间中显示大的SVG图像。 实时...