SVG

2018-10-18 本文已影响2人王瓷锤

定义：可缩放矢量图形（Scalable Vector Graphics，是一种用来描述二维矢量图形的XML（Extensible Markup Language）标记语言。简而言之，SVG面向图形，HTML面向文本。

SVG与其他图形的区别

SVG与Flash都是二维矢量图形，但SVG是基于W3C标准的，是开放的，而Flash是封闭的基于二进制格式的。因为都是W3C标准，所以SVG可与CSS、DOM等协同工作
SVG也与Canvas类似，用于绘制图形，但Canvas是非矢量的

SVG基本要素

HTML提供了定义标题、段落等内容的元素。与此类似，SVG也提供了一些元素，用于定义圆形，矩形，简单或复杂曲线，以及其他形状。一个简单的SVG文档由<svg>根元素和基本的形状元素构成，另外还有一个g元素，用来将若干个基本形状变成一个组。

注意事项

SVG的元素和属性必须按标准格式书写，XML是区分大小写的
SVG里的属性值必须用引号引起来

用法

可以作为一个svg文件放在<img>的链接中
可以直接在<body>中用<svg>标签写
可以作为css背景图片引入：background：url（）；
可以object元素引入svg文件：<object data="image.svg" type="image/svg+xml"/>

绘制流程

从SVG根元素开始：

舍弃来自HTML的doctype声明，因为基于SVG的DTD验证导致的问题比它可解决的更多
属性version和baseProfile是必不可少的
作为XML的一种语言，必须正确的绑定命名空间（在xmlns属性中绑定）

后面写入不同图形标签

SVG坐标定位

viewBox部分的内容是将你划定的这个区域放大至整个画布

SVG绘制形状

矩形<rect x="10" y="10" width="30" height="30" stroke="black" fill="red" stroke-width="5"/>
圆形<circle cx="25" cy="25" r="20" stroke="red" fill="black" stroke-width="5"/>
椭圆<ellipse cx="0" cy="0" rx="20" ry="5"/>
直线<line x1="10" x2="50" y1="110" y2="150"/>
折线<polyline points="60 100,65 120,75 125"/>
多边形<polygon points="60 100,65 120,70 115" fill="transparent"/>与折线相比会自动封闭起来
路径：path可绘制矩形、圆形、椭圆、折线、多边形等多种图形，是SVG常见的形状
<path d="M100 10 h 100 v 100 h -100 v -100"/> h是水平线，v是垂直线，最后一个点可以不写，只写z，会自动闭合，属性值大写为绝对值，小写为相对于初始点的

SVG渐变

。。。后面用时补充

SVG