[学习笔记]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学习文件。