HTML5 SVG
版权声明：未经博主授权，内容严禁转载！
SVG
· SVG （Scalable Vector Graphics - 可自由伸缩的矢量图）
- 是一种使用 XML 技术扫描二维图形的语言。
· SVG 可以使用三种方式描述二维图形。
- 矢量图（vector graphic shapes），例如直线或者曲线构成的路径。
- 图片（Image）
- 文本（text）
SVG 的优势
SVG 可以通过文本编辑器来创建和修改。
SVG 可以被搜索、索引、脚本化或压缩。
SVG 可以在任何分辨率下被高质量的打印。
SVG 可以在图像质量不下降的情况下被放大。
SVG 与 canvas 的区别
SVG
- 不依赖分辨率。
- 支持事件处理器。
- 最适合带有大型渲染区域的应用程序（如地图）。
- 不适合游戏。
canvas
- 依赖分辨率。
- 不支持事件处理器。
- 能够以 png 或 jpg 格式保存结果图像。
- 最适合图像密集型游戏。
SVG 简单示例
绘制一个黑色蓝底的矩形：
- svg 标签：用于嵌入 svg 图像。
- rect 标签：用于描述该图形是一个矩形。
- x 和 y 属性：表示矩形的左上角的坐标。
- stroke 属性：表示该矩形的边框颜色。
- stroke-width 属性：表示该矩形的边框宽度。
SVG 使用方式
单独的 SVG 文件形式
- 使用 XML 文件定义
作用：帮助我们直接创建一个后缀名为 .svg 的文件，内容是 xml 格式定义的。
- 制定特殊的命名空间
- 定义 SVG 与在 HTML 方式相同
单独定义一个 circle.svg 文件
填充 circle.svg 文件内容
circle标签是一个圆，r为半径，cx为圆心x坐标，cy为圆心y坐标，stroke为边框颜色，fill为填充颜色，stroke-width为边框宽度。
SVG 使用方式
使用 svg 标签嵌入在 HTML 页面。
使用 embed、object 和 iframe 等标签嵌入在 HTML 页面中。
内嵌在 XHTML 页面中。
练习
- 使用单独的 svg 文件绘制矩形。
- 使用 svg 标签绘制矩形。
fill-opactity="0.3" 透明度
SVG 元素种类
SVG 预定元素
- 矩形元素
- 圆形元素
- 椭圆元素
- 线条元素
- 折线元素
- 多边形元素
- 文本元素
- 图像元素
SVG 特效元素
- SVG 滤镜
- SVG 渐变
SVG 矩形元素
案例代码
SVG 圆形元素
案例代码
SVG 椭圆元素
案例代码
SVG 线条属性
案例代码：
SVG 折线元素
案例代码
SVG 多变形元素
案例代码
SVG 文本
案例代码
SVG 图像
案例代码
SVG 高斯模糊滤镜元素
案例代码
SVG 渐变元素
SVG 渐变元素 - 线性渐变
