[学习笔记]SVG初级篇



1、SVG概述

SVG是矢量图的一种， SVG是一种文件格式， 有自己的API。

根本上讲，SVG是一种矢量格式

2、SVG历史

SVG起初通过插件的方式提供浏览器使用，不久，浏览器就对SVG图像的原生支持。 

故可以把SVG代码嵌入在HTML中。

3、SVG使用

定义svg的宽高

<svg width="200" heigth="200"> </svg>   

4、SVG简单图形

<!-- 黑色的园 -->

<svg height="100" width="100"><circle cx="50" cy="50" r="50"/></svg>  

其中 cx圆心横坐标， cy圆心纵坐标， r半径长度

效果：

<!-- 红边灰底矩形的SVG -->

<svg width="200" height="100">

     <rect x="10" y="20" width="100" height="80" stroke="red" fill="#ccc"/>

</svg>

其中stroke边框颜色，fill内部填充。

效果：

5、SVG变换元素

          <div>
               <!-- 变换SVG元素， 平移， 旋转，缩放 -->
               <svg width="400" height="200">
                    <g transform="translate(60, 0) rotate(30) scale(0.75)" id="ShapeCroup">
                         <rect x="10" y="20" width="100" height="80" stroke="red" fill="#ccc" />
                         <circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"/>
                    </g>
               </svg>
          </div>

其中：<g></g>组标签group。 translate平移x长度，y长度， rotate旋转x度， scale缩放倍数

效果：

6、SVG复用元素

               <!-- defs与use组合复用内容 -->
               <svg width="200" height="150">
                    <defs>
                         <g id="ShapeCroup">
                              <rect x="10" y="20" width="100" height="80" stroke="red" fill="#ccc" />
                              <circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"/>
                         </g>
                    </defs>
                    <use xlink:href="#ShapeCroup" transform="translate(60, 0) scale(0.5)"/>
                    <use xlink:href="#ShapeCroup" transform="translate(120, 80) scale(0.4)"/>
                    <use xlink:href="#ShapeCroup" transform="translate(20, 60) scale(0.25)"/>
               </svg>

其中<defs>定义元素 <use>使用元素

效果：

7、SVG图案和渐变

渐变包括线性渐变和放射性的渐变。

               <!-- 渐变填充的矩形和图案填充的圆形 -->
               <svg>
                    <defs>
                         <pattern id="GravelPatten" patternUnits="userSpaceOnUse"
                              x="0" y="0" width="200" height="67" viewBox="0 0 160 67">
                              <image x="0" y="0" width="200" height="67" xlink:href="http://img.hb.aicdn.com/048b5946f317e08c5c65b484e228a1d0929fabf521b7f-N8Jgxf_fw658"><image>
                         </pattern>
                         <linearGradient id="RedBlackGradient">
                              <stop offset="0%" stop-color="#000"></stop>
                              <stop offset="100%" stop-color="#f00"></stop>
                         </linearGradient>
                    </defs>
                    <rect x="10" y="20" width="100" height="80"
                         stroke="red" fill="url(#RedBlackGradient)"/>
                    <circle cx="120" cy="80" r="40" stroke="#00f"
                         stroke-width="8" fill="url(#GravelPatten)"/>
               </svg>

其中image是用来填充的图案。linearGradient行渐变，从一种颜色渐变到另一种颜色。

效果：

8、SVG路径

SVG还包含自由形态的路径。path原色中有一个d属性，data之意。

               <!-- SVG路径 -->
               <svg width="100%" height="100%">
                    <path d="M25, 50
                         L 40, 80
                         L 30, 80
                         L 45, 110
                         L 35, 110
                         L 50, 140
                         L 65, 110
                         L 55, 110
                         L 70, 80
                         L 60, 80
                         L 75, 50
                         Z" id="Canopy"></path>
               </svg>

其中M代表移至， L代表线至， Q代表二次曲线，Z代表闭合路径。

效果：

9、SVG文本

               <!-- 使用SVG文本 -->
               <svg width="400">
                    <text x="10" y="80"
                         font-family="Droid Sans"
                         stroke="#00f"
                         fill="#0ff"
                         font-size="40px"
                         font-weight="bold">
                         Select this Text!
                    </text>
               </svg>

SVG中的文本是可以选择的。

效果：

10、SVG学习文件。