Svg

svg

SVG 中有一空间概念，它可分为 viewport 和 viewBox 两个部分，可以把 viewport 比作一个相框，而 viewBox 比作相片

其中 viewport 的大小就是相框的大小，也就是眼睛看得到的范围，不管相片有多大，所能看到的就是相框范围内的大小，而 viewBox 则是这张照片的大小

• 相框（viewport）由 <svg> 元素上的 width 和 height 属性来决定（也可以在 CSS 中定义它的大小）
• 照片（viewBox）由 <svg> 元素上的 viewBox 属性决定，它包含了 <min-x> 、<min-y> 、<width> 和 <height> 四个参数，即 viewBox = "<min-x> <min-y> width height" 。其中 <min-x> 和 <min-y> 用来控制照片要如何在相框中摆放，<width> 和 <height> 用来控制照片的大小

1、相框（viewport）与照片（viewBox）相等

相片会很完整的融入到相框中：

2、相框（viewport）比照片（viewBox）大

照片设定的尺寸比相框小，它会在原本的照片上裁剪一小块区域，然后再将裁剪出来的区域放大，并且填满相框

3、相框（viewport）比照片（viewBox）小

它会先把这张照片的底图放大，但是图案大小不变，然后再尽可能的将照片塞入相框

4、调整照片（viewBox）的位置

可以通过调整 <svg> 的 viewBox 属性的 <min-x> 和 <min-y> 来调整照片在相框（viewport）的位置，即 viewBox = "30 30 100 100" ，那么照片（viewBox）会向左移动 30 个单位，向上移动 30 个单位

属性

基本图形元素

矩形

<rect>的x属性和y属性，指定了矩形左上角端点的横坐标和纵坐标；width属性和height属性指定了矩形的宽度和高度（单位像素）

圆

<circle>标签的cx、cy、r属性分别为横坐标、纵坐标和半径，单位为像素

椭圆

<ellipse>的cx属性和cy属性，指定了椭圆中心的横坐标和纵坐标（单位像素）；rx属性和ry属性，指定了椭圆横向轴和纵向轴的半径（单位像素）

直线

line>标签的x1属性和y1属性，表示线段起点的横坐标和纵坐标；x2属性和y2属性，表示线段终点的横坐标和纵坐标

折线

<polyline>的points属性指定了每个端点的坐标，横坐标与纵坐标之间与逗号分隔，点与点之间用空格分

多边形

<polygon>的points属性指定了每个端点的坐标，横坐标与纵坐标之间与逗号分隔，点与点之间用空格分隔

路径

<path>标签用于制路径，d属性表示绘制顺序，它的值是一个长字符串，每个字母表示一个绘制动作，后面跟着坐标

详细绘制，可以查看 Svg-d属性 章节

文本

图片

<image>标签用于插入图片文件，xlink:href属性表示图像的来源

use标签 - 复制

• href属性指定所要复制的节点
• x属性和y属性是左上角的坐标

g标签 - 组

<g>标签用于将多个形状组成一个组（group），方便复用

def标签 - 定义形状

<defs>标签用于自定义形状，它内部的代码不会显示，仅供引用

与Canvas的区别

1. svg 绘制出来的每⼀个图形的元素都是独⽴的 DOM 节点，能够⽅便的绑定事件或⽤来改。 canvas输出的是⼀整幅画布

2. svg 输出的图形是⽮量图形，后期可以修改参数来⾃由放⼤缩⼩，不会失真和锯⻮。⽽ canvas 输出标量画布，就像⼀张图⽚⼀样，放⼤会失真或者锯⻮