Svg - 基础图形与样式

SVG ( Scalable Vector Graphics ) 是 XML 的格式，可以用来绘製向量图形，相较图片来说，放大缩小时不会糊掉，适合使用在不需丰富色彩的几何图形

新增 SVG 元素

我们需要使用 SVG 时，可直接新增 svg 元素，并设定宽度与高度

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">  <rect width="100" height="100" fill="black" /></svg>

svg 内的 xmlns="http://www.w3.org/2000/svg" 是命名空间，不写也是可以的，新增 svg 后便可在内部开始绘製图形，其绘製方法与 css 有一些不同，以下介绍图形绘製方法

矩形

<rect x="5" y="5" rx="10" ry="10" width="30" height="30" />

X: 矩形左上角的 X 轴位置y: 矩形左上角的 Y 轴位置width: 矩形的宽度height: 矩形的高度rx: 矩形圆角的 X 轴半径ry: 矩形圆角的 Y 轴半径

圆形

<circle cx="35" cy="35" r="30" />

r: 圆形的半径cx: 圆心的 X 轴位置cy: 圆形的 Y 轴位置

椭圆形

<ellipse cx="35" cy="35" rx="30" ry="10" />

rx: 椭圆形的 X 轴半径ry: 椭圆形的 Y 轴半径cx: 椭圆形中心的 X 轴位置cy: 椭圆形中心的 Y 轴位置

直线

<line x1="10" x2="100" y1="10" y2="100" stroke="black" />

x1: 直线起点的 X 轴位置y1: 直线起点的 Y 轴位置x2: 直线终点的 X 轴位置y2: 直线终点的 Y 轴位置

折线与多边形

<polyline points="0 0,50 50, 100 0" fill="none" stroke="black" /><polygon points="0 0,50 50, 100 0" fill="none" stroke="black" />

折线与多边形皆是由 points 所绘製，每两个座标为一组，分别代表 X 与 Y 座标，以逗号隔开，而两者的差异在于，多边形会将最后一点连回至起点，并封闭为一个图形，而折线不会

路径绘图

<path d="M20 30 Q40 5,50 30 T90 30" fill="none" stroke="black" stroke-width="5" />

路径绘图可参考MDN，通过组合各种线条，基本上可以绘製出所有的图形

基础

M x y: Move to，将画笔移动至指定点，后面接 x 轴与 y 轴位置Z: 封闭图形，将最后一点连回至起点

线条

L x y: Line to，画一条线至指定点，后面接 x 轴与 y 轴位置H x: 画一条水平线，后面接 x 轴位置V y: 画一条垂直线，后面接 y 轴位置

贝兹曲线

C x1 y1, x2 y2, x y: 贝兹曲线，由两个中介点与终点所组成，中间由逗号隔开S x2 y2, x y: 接在 C 后方，产生与之前相同的曲线，再加上一个中介点与终点组成Q x1 y1, x y: 二次贝兹曲线，由一个中介点与终点组成T x y: 接在 Q 后方，产生与之前相同的曲线，后面接终点 x 轴与 y 轴位置

圆弧

A rx ry x-axis-rotation large-arc-flag sweep-flag x y: 这个参数较多，稍微複杂一些

rx: 圆的 x 轴半径ry: 圆的 y 轴半径x-axis-rotation: 圆旋转的角度large-arc-flag: 0 为角度较小的弧线，1 为角度较大的弧线sweep-flag: 0 为逆时钟，1 为顺时钟x: 圆弧结束的 x 轴位置y: 圆弧结束的 y 轴位置

若 rx 与 ry 小于半径，则改为以比例方式呈现

填色、边框与样式

单纯画出路径是看不到东西的，我们还要给它颜色与样式，另外有些属性可用 css 修改，有些则不行

<rect x="10" y="10" width="100" height="100"      stroke="blue" fill="purple"      fill-opacity="0.5" stroke-opacity="0.8"      stroke-width="5" /><line x1="40" x2="120" y1="20" y2="20"      stroke="black" stroke-width="20"      stroke-linecap="butt" stroke-dasharray="3,5,7" />

fill: 相当于 background-color，可使用的颜色同 css，预设为黑色fill-opacity: 背景颜色的透明度stroke: 相当于 border-color，可使用的颜色同 cssstroke-opacity: 边框线的透明度stroke-width: 边框线宽度stroke-dasharray: 将线条改为虚线，数字带入线段距离与空白距离，以逗点分隔stroke-dashoffset: 将线段往左或往右推移stroke-linecap: 线条端点样式，有 butt、square、round 共三种stroke-linejoin: 线条接合样式，有 miter、round、bevel 共三种

图形部份大概如上，之后就是如何应用了 ~