SVG 学习（一）
SVG 意为可缩放矢量图形（Scalable Vector Graphics）。
SVG 使用 XML 格式定义图像。
什么是SVG？
- SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
- SVG 用来定义用于网络的基于矢量的图形
- SVG 使用 XML 格式定义图形
- SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
- SVG 是万维网联盟的标准
- SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
SVG 的历史和优势
在 2003 年一月，SVG 1.1 被确立为 W3C 标准。
参与定义 SVG 的组织有：太阳微系统、Adobe、苹果公司、IBM 以及柯达。
与其他图像格式相比，使用 SVG 的优势在于：
- SVG 可被非常多的工具读取和修改（比如记事本）
- SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
- SVG 是可伸缩的
- SVG 图像可在任何的分辨率下被高质量地打印
- SVG 可在图像质量不下降的情况下被放大
- SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
- SVG 可以与 Java 技术一起运行
- SVG 是开放的标准
- SVG 文件是纯粹的 XML
SVG 的主要竞争者是 Flash。
与 Flash 相比，SVG 最大的优势是与其他标准（比如 XSL 和 DOM）相兼容。而 Flash 则是未开源的私有技术。
查看 SVG 文件
今天，所有浏览器均支持 SVG 文件，不过需要安装插件的 Internet Explorer 除外。插件是免费的，比如 Adobe SVG Viewer。
以上说明来源于w3c
接下来开始正式进入svg学习.........................
1、首先看一个例子svg圆和文字的创建
<!--svg圆和文字--> <svg id="diag" width="400" height="400" style="border:1px solid #000;"> <circle cx="50" cy="50" r="50"/> <text y="100" x="100" font-family="Arial" font-size="60px" fill="#f00" text-anchor="left"> SVG 文本 </text> </svg>
2、SVG 绘制矩形
<svg width="200" height="200"> <rect x="10" y="10" width="100" height="100" stroke="red" fill="#ccc" /> </svg> stroke="red" 红色边框 fill="#ccc"灰色填充色
3、SVG 绘制圆形
<svg width="200" height="200"> <rect x="10" y="10" width="100" height="100" stroke="red" fill="#ccc" /> <circle cx="50" cy="50" r="40" stroke="#00f" fill="none" stroke-width="8"/> </svg> cx="50" 圆心的x坐标值 cy="50" 圆心的y坐标值 r="40" 圆的半径 fill="none" 不添加填充 stroke-width="8" 边框宽度为8 stroke="#00f" 边框颜色
4、svg的变换
<svg width="200" height="200"> <g transform="translate(60,0) rotate(30) scale(0.75)" id="sh_group"> <rect x="10" y="10" width="100" height="100" stroke="#ccc" fill="#ccc"/> <circle cx="100" cy="100" r="40" stroke="#f00" fill="none" stroke-width="5"/> </g> </svg> <g></g> 代表一个组，可以将多个元素结合起来 transform：变换 translate(60,0) 平移到60x 0y rotate(30) 旋转30度 scale(0.75) 缩放到之前的0.75倍
5、svg复用内容
<svg width="200" height="200"> <defs> <g id="sh_group"> <rect x="10" y="10" width="100" height="100" stroke="#ccc" fill="#ccc"/> <circle cx="100" cy="100" r="40" stroke="#f00" fill="none" stroke-width="5"/> </g> </defs> <use xlink:href="#sh_group" transform="translate(60,0) rotate(30) scale(0.75)"/> <use xlink:href="#sh_group" transform="translate(120,80) rotate(30) scale(0.45)"/> <use xlink:href="#sh_group" transform="translate(20,60) rotate(30) scale(0.25)"/> </svg> defs 用于定义留待将来使用的内容。 use 用来链接到defs元素定义的内容。
6、为矩形和圆形添加纹理
<svg width="200" height="200"> <defs> <pattern id="grap" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="67" viewBox="0 0 100 67"> <image x="0" y="0" width="100" height="67" xlink:href="https://www.baidu.com/img/bd_logo1.png"></image> </pattern> <linearGradient id="redBLackGradient"> <stop offset="0%" stop-color="#000"></stop> <stop offset="100%" stop-color="#f00"></stop> </linearGradient> </defs> <rect width="100" height="80" x="10" y="20" stroke="red" fill="url(#redBLackGradient)"/> <circle cx="120" cy="80" r="40" stroke="#00f" stroke-width="8" fill="url(#grap)" /> </svg> pattern 定义一个待填充的图像 linearGradient:定义一个渐变 stop:设置渐变的开始值以及结束值 fill="url(#redBLackGradient)加载预设的纹理或者渐变
7、svg路径
<svg width="300" height="300"> <path d="M-25,-50L-10,-80L-20,-80L-5,-110L-15,-110L0,-140L15,-110L5,-110L20,-80L10,-80L25,-50Z" fill="#f00" transform="translate(100,200)" id="can"> </path> </svg> path:自由形态的路径 d:代表数据 M:代表moveTo 移动到某一点 L:代表lineto 划线至 Q：代表二次曲线 Z：代表闭合路径
8、svg 二次曲线路径
<svg width="400" height="400"> <defs> <pattern id="gd" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="67" viewBox="0 0 100 67"> <image x="0" y="0" width="100" height="67" xlink:href="https://www.baidu.com/img/bd_logo1.png"></image> </pattern> </defs> <g transform="translate(-10,350)" stroke-width="20" stroke="url(#gd)" stroke-linejoin="round"> <path d="M0,0Q170,-50 260,-190Q310,-250 410,-250" fill="none"> </path> </g> </svg>
stroke-linejoin="round":这段代码作用是让二次曲线的接口处变圆滑
9、svg 文本
<svg width="600" height="200"> <text x="10" y="60" font-family="Arial" stroke="#0ff" font-size="40px" font-weight="bold"> dfksfgjfgdj </text> </svg>
定义的方法和css定义基本差不多
