初识 SVG

背景
最近在做需求时，设计给的是 svg 的，但是因为定位麻烦，我转成了 png，结果被说变模糊了。无奈只能使用 svg。使用SVG过程中，遇到了一些问题，正好学习分享一下。

普遍认识：

• SVG 是矢量的，也就是放大不模糊，不失真。
• 一般用作网络中的图标。

SVG

1. 是用 XML 描述的一种规范。

HTML 与 XML
HTML： 超文本标记语言。预定义标记（标签）。
XML：可扩展标记语言，可用来定义其他标记语言。没有固定标记。

例子：

2. 类似于 HTML，有元素（标签）和属性。

SVG 里区分大小写
SVG 里属性值必须要引号，包括数字

3. 定位依靠元素的 x、y 属性

基本元素

• 矩形 rect
• 圆 circle
• 椭圆 ellipse
• 线 line
• 折线 polygon
• 多边形 polyline
• 路径 path
• 字形 glyph，类似与 path

常见属性

svg 以左上角为 x =0，y=0

• x - x 位置
• y - y 位置
• cx - 椭圆圆心 x
• cy - 椭圆圆心 y
• rx、ry - 圆角，rx 为 x 的方向弧度，ry 为 y方向弧度
• width
• height
• fill
• fill-opacity
• stroke
• stroke-opacity
• style
• points - 定义折线和多边形点
• d - 路径特有的属性，是一个 命令 + 参数 的序列

d 属性

参数都是 x y 的格式，根据前边命令表示的意思有些出入。
大写字母命令后边的参数表示绝对位置，小写字母命令后的参数表示相对位置。

m 10 10
M 10 10

• M - move to - 只移动不绘制
• L - line to - 移动加绘制
• H - 只有一个参数 x - 绘制水平线
• V - 只有一个参数 y - 绘制垂直线
• Z(z) - 没有参数 - 绘制一条线到起始点
• C - 贝塞尔曲线 - 三个参树 - 起点控制点、终点控制点、终点
• S - 也是贝塞尔曲线 - 两个参数 - 如果S命令跟在一个C或S命令后面，则它的第一个控制点会被假设成前一个命令曲线的第二个控制点的中心对称点。如果S命令单独使用，前面没有C或S命令，那当前点将作为第一个控制点
• Q - 二次贝塞尔曲线 - 两个参数 - 控制点、终点
• T - 二次贝塞尔曲线 - 一个参数 - 终点
• A - 弧形 - 七个参数 -

// 弧形单独写明
// A rx ry x-axis-rotation large-arc-flag sweep-flag x y
rx、ry 弧度
x-axis-rotation: 旋转情况（顺时针，可为负）
large-arc-flag: 决定弧线是大于还是小于180度，0表示小角度弧，1表示大角度弧
sweep-flag: 弧线的方向，0表示从起点到终点沿逆时针画弧，1表示从起点到终点沿顺时针画弧
x、y 终点坐标

// 绘制一个矩形的例子

引入方式

• 在 HTML 中直接书写

svg 标签上的样式定义内部的元素
元素的样式具有最高优先级

声明样式块：

不支持 css 中的伪类、渐变

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

• 使用 标签

无法通过外部标签 style 样式控制 svg
上边 style 的 fill 属性并不能生效
大小：

1. 如果加载的 svg 文件内 svg 未指定大小，默认 300 * 150
2. 如果置顶了大小，则为实际大小
   可按照 inline-block 处理
   默认无 border

• 使用

  满足 iframe 特性
  同样无法通过 style 样式控制 svg
  大小默认 iframe 大小 300 * 150（+ border）

  4. 使用