文本
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>
制作整理不易,以上内容均为原创(参考了部分官方文档和老师整理的案例)。如要引用请附上本文链接,如有疑问可以在评论区畅所欲言,作者看到会第一时间回复,欢迎交流!