SVG介绍
- SVG，即可缩放矢量图形(Scalable Vector Graphics)，是一种 XML 应用，可以以一种简洁、可移植的形式表示图形信息
- SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
1.SVG 文档基本结构
- 可以把如下内容保存文一个svg文件，然后用浏览器打开，也可以放置在html文档的任何位置
<?xml version="1.0" encoding="UTF-8"?>
<svg width='140' heiight='170' xmlns='http://wwww.w3.org/2000/svg'>
<title>Cat</title>
<desc>Stick Figure of Cat</desc>
<!-- 在这里绘制图像 -->
</svg>
<html>
<head></head>
<body>
<svg width='140' heiight='170' xmlns='http://wwww.w3.org/2000/svg'>
</svg>
</body>
</html>
2.基本属性
2.1 fill
- 填充属性，封闭曲线填充颜色
fill='none'
fill='#333993'
2.2 stroke，stroke-width
- 线条颜色和宽度
stroke='black' stroke-width='2'
3.几个注意点
- svg的坐标原点在左上角，水平为x轴，垂直为y轴
- 默认填充为黑色，边框为白色
- 基本属性的颜色可以用black等颜色关键词也可以用6位rgb已经3位rgb码
- 圆形宽度等是不包括边框的大小的。所以圆形的大小是是圆形的半径+2个边框的宽度。矩形类似。
4.基本图形
4.1 圆形
<circle cx='70' cy='95' r='50' stroke='black' fill='none'></circle>
4.2 线段
<line x1='75' y1='95' x2='135' y2='85' stroke='black' />
4.3 矩形
-
其中的rx和ry用来表示矩形的弯角
image.png
<rect x='50' y='10' width='30' height='50' rx='2' ry='2' stroke='black' fill='none'/>
4.4 多边形
- 指定的points个数必须为偶数，会都在返回到原始坐标
<polygon points='15,10 55,10 45,20 5,20' style='fill:red; stroke: black;' />
4.5 折线
- 指定的points个数必须为偶数，不会返回到原始坐标
- stroke-width:3用来指定线宽
<polyline points='15,10 55,10 45,20 5,20' style='fill:none; stroke: black;' />
<style="fill:none;stroke:black;stroke-width:3" />
4.6 文本
- 用来绘制一个文本，需要指定文本的位置
- 可以指定文本是否加粗、字体等
- 可以带有a元素也可以不带
<a xlink:href="//www.w3cschool.cc/svg/" target="_blank">
<text x="60" y="165" fill='red' font-size='20'>Cat</text>
</a>
4.7 分组和引用
- 使用defs元素
- SVG规范推荐我们将所有想要复用的对象放置在元素内，这样SVG阅读器进入流式环境中就能更轻松地处理数据
- 由于组合在<defs>元素内，它们不会立刻绘制到屏幕上，而是作为"模板"供其他地方使用。
- defs元素里面定义的模板元素的坐标是相对于原点来绘制。引用的时候需要指定的x和y。可以理解为原点的偏移量，在该点进行绘制图形。
<svg width='240' height='240' viewBox='0 0 240 240' xmlns='http://wwww.w3.org/2000/svg'>
<defs>
<g id='house' style='stroke:black'>
<desc>房子</desc>
<rect x='0' y='41' width='60' height='60' />
<polyline points='0 41, 30 0, 60 41' />
<polyline points='30 110, 30 71, 44 71， 44 101' />
</g>
</defs>
<use xlink:href='#house' x='0' y='0' style='fill:#cfc'/>
<use xlink:href='#house' x='120' y='0' style='fill:#99f' />
</svg>
5.变换
- 注意 多个变换可以合并成一个
5.1 平移
- 是全部点都跟着平移，数值可以为负数
<rect x='50' y='10' width='30' height='50' stroke='black' fill='none'/>
<rect x='50' y='10' width='30' height='50' stroke='black' fill='none' transform='translate(140 0)'/>
5.2 缩放
- 是全部点都跟着缩放，包括图形的起始坐标也会跟着缩放。数值可以为负数
<rect x='50' y='10' width='30' height='50' stroke='black' fill='none'/>
<rect x='50' y='10' width='30' height='50' stroke='black' fill='none' transform='scale(2,1)'/>
5.3 旋转
- 是全部点都跟着原点旋转指定角度
<rect x='50' y='10' width='30' height='50' stroke='black' fill='none'/>
<rect x='50' y='10' width='30' height='50' stroke='black' fill='none' transform='rotate(15)'/>
6. 如何实现多行文本，文本垂直排列
6.1 文本垂直排列
- 添加属性writing-mode='tb'即可。如果这个属性放空，则为水平排列
<text x='1980' y='720' fill='red' font-size='60' writing-mode='tb'>Hello World!!</text>
6.2 多行文本方法1
- 垂直方向的多行文本需要修改为y和dx属性
<svg>
<text x="50" y="50">
<tspan x="50" dy="1.2em">第一行文本</tspan>
<tspan x="50" dy="1.2em">第二行文本</tspan>
<tspan x="50" dy="1.2em">第三行文本</tspan>
</text>
</svg>
6.3 多行文本方法2
- 注意，必须给出名称空间声明，并且需要编写有效的XHML才能使其正常工作。
- 此外，foreignObject是SVG上下文的一部分，因此需要设置width和height，否则它将没有固有的大小。
<svg xmlns="http://www.w3.org/2000/svg"
width="21cm" height="29.7cm" style="border:1px solid black;">
<foreignObject x="6.4cm" y="3.6cm" width="10cm" height="10cm">
<p xmlns="http://www.w3.org/1999/xhtml"
style="font-size:48px;">The paragraph here</p>
</foreignObject>
</svg
网友评论