文本
text定义文本 / tspan 定义分组文本
| 属性 | 说明 |
|---|---|
| x,y | 可选，文本起始位置坐标。 |
| dx | 可选，文本在水平方向上的偏移量。 |
| dy | 可选，文本在垂直方向上的偏移量。 |
| text-anchor | 可选，设置文本对齐方向。可能值是start(默认),middle,end。 |
| textLength | 可选，设置文本总长度。 |
| lengthAdjust | 可选，设置文本拉伸或压缩。可能值是 spacing(默认)和spacingAndGlyphs。 |
| rotate | 可选，设置旋转角度(单个字符旋转)。 |
text的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
svg {
width: 300px;
height: 300px;
border: 1px solid green;
}
</style>
</head>
<body>
<svg>
<!--
x可以设置成0 y设置为0是看不到的
x和y属性决定了文本在视口显示的位置
-->
<text x=30 y=30 fill="red">Hello World</text>
<text x=0 y=50 fill="red">Hello World</text>
<text x=0 y=0 fill="red">Hello World</text>
</svg>
<svg>
<text x=0 y=10 fill="red">Hello World</text>
<!--
dx与dy是设置文本相对于当前位置的偏移量
如果dy或者dy的值是多个，则从第二个值开始表示文字内字符的间距
-->
<text x=0 y=50 fill="red" dx="10 10 20 30 40">Hello World</text>
<text x=0 y=70 fill="pink" dy="10 10 20 30 40">Hello World</text>
</svg>
<svg>
<!-- 水平对齐：
start:居左
middle:居中
end:居右
-->
<text x=130 y=20 text-anchor="start" fill="red">文本的对齐方式</text>
<text x=130 y=50 text-anchor="middle" fill="green">文本的对齐方式</text>
<text x=130 y=80 text-anchor="end" fill="blue">文本的对齐方式</text>
</svg>
<!--
文本其他样式
textLength：
文本的长度
lengthAdjust:
配合textLength一起使用
spacing:默认的 单个文字大小不变，只收缩或扩张间距
spacingAndGlyphs 文字和间距一起扩张或收缩
-->
<svg>
<text x="0" y="20">asdfghjkl;kqwetrtyyuuiioop[[]]</text>
<text x="0" y="50" textLength="270">asdfghjkl;kqwetrtyyuuiioop[[]]</text>
<text x="0" y="80" textLength="100" lengthAdjust="spacing" fill="red">asdfghjkl;kqwetrtyyuuiioop[[]]</text>
<text x="0" y="110" textLength="100" lengthAdjust="spacingAndGlyphs" fill="red">asdfghjkl;kqwetrtyyuuiioop[[]]</text>
</svg>
<svg>
<!--
文本旋转
rotate
transform="rotate(30 20,60)"
一个数列transform="rotate(30)",这个所所有的角度
多个数列transform="rotate(30 20,60)"，每个字符旋转分别转到哪个值，剩下的最后一个旋转值
-->
<text x=0 y=15>SVG text</text>
<text x=30 y=45 transform="rotate(30 20,60)">SVG text</text>
</svg>
</body>
</html>
tspan
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
svg {
width: 300px;
height: 300px;
border: 1px solid green;
}
</style>
</head>
<body>
<svg>
<!--
x可以设置成0 y设置为0是看不到的
x和y属性决定了文本在视口显示的位置
-->
<text x=30 y=30 fill="red">Hello World
<!-- tspan：文本分组 -->
<tspan x=20 y=60 fill="blue" font-weight="bold">
SVG
</tspan>
</text>
</svg>
<svg>
<!-- tsapn中的rotate
注意:在tspan标签中transform属性并不生效，但是tspan支持rotate属性，在其他标签中不支持rotate属性
-->
<text x=0 y=30 fill="red">这是SVG text文本标签</text>
<text x=0 y=60 fill="pink">
<tspan transform="rotate(45)">这</tspan>
<tspan rotate="45">是</tspan>
<tspan scale="2.5">SVG</tspan>
<tspan fill="#9966CC">text 文本</tspan>
</text>
<text x=0 y=30 fill="red" transform="translate(30,120)">这是SVG text文本标签</text>
<text x=0 y=160 fill="red" transform="scale(1.5,1.5)">SVG</text>
</svg>
</body>
</html>
textPath 定义文本路径
| 属性 | 说明 |
|---|---|
| xlink:href | 定义到资源的链接作为引用URL。最新规范已经被href属性取代了。 |
| startOffset | 距离起始位置的偏移量。 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
svg {
width: 300px;
height: 300px;
border: 1px solid green;
}
</style>
</head>
<body>
<svg>
<!--
A (rx, ry, xr, laf, sf, x, y) - 绘制弧线
-->
<!--
defs: 被引用元素容器 - 类似于vue中的componet(组件)
-->
<!-- <defs> -->
<!-- <path id="p1" d="M75,20 a1,1 0 0,0 100,0" fill="none" stroke="red"></path> -->
<path id="p1" d="m100,100 a200,100 0 1 1 100,100" fill='none' stroke='red'></path>
<!-- </defs> -->
<text x=10 y=10 fill='green'>
<textPath xlink:href="#p1" startOffset="30">abcdefgadffggfd</textPath>
<textPath xlink:href="#p1">abcdefgadffggfd</textPath>
</text>
</svg>
</body>
</html>
图形引用、裁剪、蒙版
< use >创建图形引用
- use>标记的作用是能从SVG文档内部取出一个节点，克隆它，并把它输出到别处。跟‘引用’很相似，但它是深度克隆。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
svg {
width: 300px;
height: 300px;
border: 1px solid green;
}
</style>
</head>
<body>
<svg>
<!--
defs: 被引用元素容器 - 类似于vue中的componet(组件)
-->
<defs>
<g id="shape" class="s1">
<rect x=10 y=15 width="50" height="50"></rect>
</g>
</defs>
<!-- use : 引用图形(类似使用vue的组件)
use通过xlink:href属性引用图形路径 必须通过Id属性设置Id值
-->
<use xlink:href="#shape"></use>
<use xlink:href="#shape" x=50 y="100" fill="#FF9900"></use>
<!-- 只能通过id属性设置的id值来进行引用 -->
<use xlink:href=".s1" x=50 y="200" fill="red"></use>
<use xlink:href="#shape" x=50 y="200" fill="red"></use>
</svg>
</body>
</html>
< clipPath > 裁剪图形
- 标记的作用相当于一个蒙版，它能限制哪些地方可见，哪些地方不可见。
- 标记指定的区域之外的所有内容都不会被显示(图像不会被绘制出来).
- 元素需要使用clip-path属性来引用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
svg{
width: 300px;
height: 300px;
border: 1px solid green;
}
</style>
</head>
<body>
<svg>
<!-- <defs> -->
<!-- 定义裁剪路径 -->
<!-- <clippath id="clip"> -->
<rect x=25 y=25 width="50" height=50></rect>
<!-- </clippath> -->
<!-- </defs> -->
<circle cx="35" cy=35 r=30 fill="red" ></circle>
</svg>
<svg>
<defs>
<!-- 定义裁剪路径 -->
<clippath id="clip">
<rect x=25 y=25 width="50" height=50></rect>
</clippath>
</defs>
<circle cx="35" cy=35 r=30 fill="red" clip-path="url(#clip)"></circle>
</svg>
</body>
</html>
< mask >创建蒙版
- 在SVG中，你可以指一个透明的遮罩层和当前对象合成，形成背景。透明遮罩层可以是任何其他图形对象或者
元素。mask元素用于定义这样的遮罩元素。属性mask用来引用一个遮罩元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
svg {
width: 300px;
height: 300px;
border: 1px solid green;
}
</style>
</head>
<body>
<svg>
<g>
<defs>
<mask id="ms">
<!-- 定义蒙版 -->
<!--
mask 使用颜色控制的透明度
white:表示为1，完全显示
black:表示透明度为0，完全透明
-->
<circle cy="150" cx="150" r="80" fill="white"></circle>
<circle cy="100" cx="150" r="80" fill="black"></circle>
</mask>
</defs>
<!-- 使用蒙版 -->
<circle cy="150" cx="150" r="80" fill="green" mask="url(#ms)"></circle>
</g>
</svg>
</body>
</html>
制作整理不易，以上内容均为原创（参考了部分官方文档和老师整理的案例）。如要引用请附上本文链接，如有疑问可以在评论区畅所欲言，作者看到会第一时间回复，欢迎交流！
3986
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
