SVG 入门笔记_ZNDS问答

zerotime001

什么是 SVG

SVG 是一种基于 XML 语法的图像格式。XML 类似 HTML/CSS 是一种网络标准规范；它是矢量图像文件，与 PNG，JPG 等像素文件不同
为啥用 SVG

通常 Web 开发，使用的是 HTML+CSS 来展示页面内容，但是 HTML 是为盒模型设计，当我们需要渲染一些特殊形状，就不太省事了。
SVG 可以看作是 HTML 在浏览器中的增强，为了支持自定义形状而生。
什么时候用 SVG

如果页面中有较多图形，并且图形用 HTML+CSS 实现起来比较复杂时，就可以考虑使用 SVG 来实现。SVG 内置一些图形，如 rect，ellipse，circle 等，也可以用 path API 绘制弧形、曲线。
XML 语法

XML 使用起来和 HTML 语法很相似。

SVG 的元素和属性必须按照标准来写，因为 XML 区分大小写（与 HTML 不一样）
SVG 的属性值必须使用引号，包括数字也一样

示例

<svg xmlns=&#34;http://www.w3.org/2000/svg&#34; height=&#34;200px&#34; width=&#34;200px&#34; viewBox=&#34;0 0 100 100&#34;></svg>

这里定义的画布尺寸是200200px。但是，viewBox属性定义了画布上可以显示的区域：从(0,0)点开始，100宽100高的区域。这个100100的区域，会放到200*200的画布上显示。于是就形成了放大两倍的效果。

基本属性

元素渲染顺序，“后来居上”
嵌入 HTML 的方式
- html 如果为 xhtml，并且类型声明为 application/xhtml+xml 可以直接嵌入
- html 5 可以直接嵌入
- 其他方式

M：move to，绝对位移；小写 m 表示相对坐标
H：水平移动，数值表示 X 坐标
V：垂直移动，数值表示 Y 坐标
L：line to
Z：闭合路径

// 以下都为两个正方形
<path d=&#34;M 10 10 H 90 V 90 H 10 Z&#34; fill=&#34;transparent&#34; stroke=&#34;black&#34; />
<path d=&#34;M10 10 H 90 V 90 H 10 L 10 10&#34; fill=&#34;transparent&#34; stroke=&#34;black&#34; />曲线命令

绘制平滑曲线的命令有三个：弧形，三次贝塞尔曲线 C，二次贝塞尔曲线 Q
贝塞尔曲线
三次贝塞尔曲线需要定义一台点和两个控制点，因此需要设置三组坐标参数：
C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)(x,y) 表示的曲线的终点，两外两个坐标是控制点，(x1,y1)是起点的控制点，(x2,y2)是终点的控制点。

控制点描述的是曲线起始点的斜率，曲线上各个点的斜率，是从起点斜率到终点斜率的渐变过程

简写或延长
S x2 y2, x y (or s dx2 dy2, dx dy)如果S命令跟在一台C或S命令后面，则它的第一台控制点会被假设成前一台命令曲线的第二个控制点的中心对称点。
<path d=&#34;M10 10 S 40 50, 70 10&#34; stroke=&#34;red&#34; fill=&#34;transparent&#34; />
<path d=&#34;M10 10 C 30 40, 50 40, 70 10&#34; stroke=&#34;red&#34; fill=&#34;transparent&#34; />二次贝塞尔曲线更加简单
Q x1 y1, x y (or q dx1 dy1, dx dy)延长或简写
T x y (or t dx dy)弧形
A rx ry x-axis-rotation large-arc-flag sweep-flag x y

rx, ry 弧形的长短半径
x-axis-rotAIon：旋转、倾斜角度
large-arc-flag：0 小角圆弧，1 大角圆弧
sweep-flag：0 逆时针，1 顺时针
x, y 弧形的终点

课后练习

如何使用 SVG 绘制柱状图，折线图，饼图？大家可以动手试一试，可以参考我的代码：

		自动登录	找回密码
密码			立即注册

SVG 入门笔记

相关问题更多>

最新回答