SVG例子
本章包含一些SVG画的图片，来演示SVG的各种功能。我会让图片为自己代言。与此同时，每一个图片或图形下面的文字链接都解释了如何绘制出它，或者达到某个效果等等。
- 基本图形
html
<embed src="./assets/2/basic_shapes.svg" width="500" height="120" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/"></embed><embed src="./assets/2/basic_shapes.svg" width="500" height="120" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/"></embed>- 高级形状（路径）
html
<embed src="./assets/2/advanced_shapes.svg" width="500" height="120" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/"></embed><embed src="./assets/2/advanced_shapes.svg" width="500" height="120" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/"></embed>- 文本
html
<embed src="./assets/2/text.svg" width="500" height="200" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/"></embed><embed src="./assets/2/text.svg" width="500" height="200" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/"></embed>- 图片
html
<embed src="./assets/2/images.svg" width="500" height="120" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/"></embed><embed src="./assets/2/images.svg" width="500" height="120" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/"></embed>- 分层+不透明度
html
<embed src="./assets/2/layering_opacity.svg" width="500" height="200" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/"></embed><embed src="./assets/2/layering_opacity.svg" width="500" height="200" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/"></embed>- 转换
html
<embed src="./assets/2/transformations.svg" width="500" height="200" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/"></embed><embed src="./assets/2/transformations.svg" width="500" height="200" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/"></embed>- 渐变
html
<embed src="./assets/2/gradients.svg" width="515" height="325" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/"></embed><embed src="./assets/2/gradients.svg" width="515" height="325" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/"></embed>- 链接
html
<embed src="./assets/2/links.svg" width="515" height="130" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/"></embed><embed src="./assets/2/links.svg" width="515" height="130" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/"></embed>- 动画
html
<embed src="./assets/2/animations.svg" width="515" height="210" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/"></embed><embed src="./assets/2/animations.svg" width="515" height="210" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/"></embed>- 用例
html
<embed src="./assets/2/use_cases.svg" width="515" height="510" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/"></embed><embed src="./assets/2/use_cases.svg" width="515" height="510" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/"></embed>