svg

视口

viewport

SVG可见区域的大小，类比于画布

实例

<svg width="800" height="400"></svg>

viewBox

相当于在显示器(画布)上截屏时的框，将截取的内容显示出来

viewBox="x y width height"

• x：左上角横坐标

• y：左上角纵坐标

• width ： 宽度

• height：高度

坐标

SVG transform与 CSS transform 不同

我们一般使用SVG 的transform，因为IE不支持CSS的

translate 位移

SVG 相对于左上角， CSS相当于自己的中心点

不要带单位

scale 缩放

SVG 相对于左上角缩放，距离坐标原点和距离和元素大小都会被缩放，在视窗中会重新定位

skew 斜切

同上

形状

矩形<rect>

rx：x方位的圆角

ry：y方位的圆角

圆形<circle>

r：圆的半径

cx：圆心的x位置

cy：圆心的y位置

椭圆<ellipse>

rx：椭圆x半径

ry：椭圆y半径

cx：椭圆中心x位置

cy：椭圆中心y位置

线<line>

x1：起点x位置

y1：起点y位置

x2：终点x位置

y2：终点y位置

折线<polyline>

用空白和逗号连接，可以写多个点

最后一个点会和第一个点要写一样，才会闭合

<polyline points="50 49, 10 15, 25 1, 75 1, 90 15, 50 49" stroke="#C7000B" fill="transparent" />

多边形<polygon>

最后一个点会和第一个点闭合

<polygon points="50 49, 10 15, 25 1, 75 1, 90 15, 50 49" stroke="#C7000B" fill="transparent" />

路径<path>

可以绘制多种图形

大写字母表示绝对位置，小写字母表示相对位置

• M 移动画笔位置，表示开始的位置
• L 在位置之间画一条直线
• H 绘制水平线
• V 绘制垂直线
• Z 把最后一个点和起点闭合

<path d="M5  5 L 25 5 L 25 25 L 5 25 L 5 5"  stroke="#C7000B" fill="transparent" />
<path d="M35 5 H 55   V 25    H 35   L 35 5" stroke="#C7000B" fill="transparent" />
<path d="M65 5 H 85   V 25    H 65   Z"      stroke="#C7000B" fill="transparent" />

图标

• fill: blue; 设置图标颜色
• fill-opacity: 0.5; 设置图标透明度
• stroke: red; 设置描边颜色
• stroke-width: 10px; 设置描边宽度
• stroke-opacity: 0.8; 设置描边透明度