参考手册
SVG 教程
SVG 放射性渐变
SVG 全部元素

SVG 实例

本章节列出全部 SVG 实例，其中有之前章节里面引用过的，也有很多是新实例。

查看 SVG 文件

目前主流浏览器都支持 SVG，可直接用浏览器打开查看。

查看 SVG 源代码

如需查看 SVG 源代码，请打开这些例子，然后在窗口中右键单击，选择“查看源代码”。

SVG 实例

SVG 形状

矩形

带有透明度的矩形

带有透明度的矩形 2

带有圆角的矩形

圆形

椭圆形

累叠而上的三个椭圆

两个椭圆

一条线

三角形

四边形

折线

路径

螺旋

SVG 滤镜

feGaussianBlur 滤镜

另一个feGaussianBlur 滤镜

feBlend 滤镜

feColorMatrix 滤镜

feComponentTransfer 滤镜

feOffset 滤镜

feOffset、feFlood、feComposite、feMerge 以及 feMergeNode

feMorphology 滤镜

SVG 渐变

线形渐变 (水平渐变)

线形渐变 (垂直渐变)

放射性渐变

放射性渐变 2

SVG Misc

向矩形添加 a 标签，这样矩形就可以作为一个超级链接了：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <svg width="100%" height="100%" version="1.1"
  6. xmlns="http://www.w3.org/2000/svg"
  7. xmlns:xlink="http://www.w3.org/1999/xlink">
  9.   <a xlink:href="https://cankaoshouce.com" target="_blank">
  10.     <rect x="20" y="20" width="250" height="250"
  11.     style="fill:blue;stroke:pink;stroke-width:5;opacity:0.9"/>
  12.   </a>
  14. </svg>
  16. </body>
  17. </html>
运行一下

重复用 5 秒时间淡出的矩形：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <p>重复用 5 秒时间淡出的矩形</p>
  7. <svg width="400" height="400">
  8.   <rect x="20" y="20" width="250" height="250" style="fill:blue">
  9.     <animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="5s" repeatCount="indefinite" />
  10.   </rect>
  11.   对不起，您的浏览器不支持 SVG.
  12. </svg>
  14. </body>
  15. </html>
运行一下

动态改变矩形的 x、y 以及 width、height 属性来创造出动画效果，并改变矩形的颜色：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <p>动态改变矩形的 x、y 以及 width、height 属性来创造出动画效果，并改变矩形的颜色</p>
  7. <svg width="500" height="500">
  8.   <rect id="rec" x="300" y="100" width="300" height="100" style="fill:lime">
  9.     <animate attributeName="x" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="0" />
  10.     <animate attributeName="y" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="100" to="0" />
  11.     <animate attributeName="width" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="800" />
  12.     <animate attributeName="height" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="100" to="300" />
  13.     <animate attributeName="fill" attributeType="CSS" from="lime" to="red" begin="2s" dur="4s" fill="freeze" />
  14.   </rect>
  15.   对不起，您的浏览器不支持 SVG.
  16. </svg>
  18. </body>
  19. </html>
运行一下

会改变颜色的三个矩形：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <p>会改变颜色的三个矩形</p>
  7. <svg width="500" height="500">
  8.   <rect x="10" y="20" width="90" height="60">
  9.     <animate id="a1" attributeName="fill" from="red" to="blue" dur="3s" fill="freeze" />
  10.   </rect>
  11.   <rect x="10" y="120" width="90" height="60">
  12.     <animate id="a2" attributeName="fill" from="blue" to="yellow" begin="a1.end" dur="3s" fill="freeze" />
  13.   </rect>
  14.   <rect x="10" y="220" width="90" height="60">
  15.     <animate id="a3" attributeName="fill" from="yellow" to="green" begin="a2.end" dur="3s" fill="freeze" />
  16.   </rect>
  17.   对不起，您的浏览器不支持 SVG.
  18. </svg>
  20. </body>
  21. </html>
运行一下

沿一个运动路径移动的文本：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <p><strong>Note:</strong> 沿一个运动路径移动的文本</p>
  7. <svg width="500" height="500">
  8.   <g transform="translate(100,100)">
  9.     <text id="TextElement" x="0" y="0" style="font-family:Verdana;font-size:24"> It's SVG!
  10.       <animateMotion path="M 0 0 L 100 100" dur="5s" fill="freeze" />
  11.     </text>
  12.   </g>
  13.   对不起，您的浏览器不支持 SVG.
  14. </svg>
  16. </body>
  17. </html>
运行一下

沿一个运动路径移动、旋转并缩放的文本：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <p>沿一个运动路径移动、旋转并缩放的文本</p>
  7. <svg width="600" height="600">
  8.   <g transform="translate(100,100)">
  9.     <text id="TextElement" x="0" y="0" style="font-family:Verdana;font-size:24; visibility:hidden"> It's SVG!
  10.       <set attributeName="visibility" attributeType="CSS" to="visible" begin="1s" dur="5s" fill="freeze" />
  11.       <animateMotion path="M 0 0 L 100 100" begin="1s" dur="5s" fill="freeze" />
  12.       <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-30" to="0" begin="1s" dur="5s" fill="freeze" />
  13.       <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="3" additive="sum" begin="1s" dur="5s" fill="freeze" />
  14.     </text>
  15.   </g>
  16.   对不起，您的浏览器不支持 SVG.
  17. </svg>
  19. </body>
  20. </html>
运行一下

沿一个运动路径移动、旋转并缩放的文本 + 逐步放大并改变颜色的矩形：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <p>沿一个运动路径移动、旋转并缩放的文本 + 逐步放大并改变颜色的矩形</p>
  7. <svg width="600" height="600">
  8.   <rect id="rec" x="300" y="100" width="300" height="100" style="fill:lime">
  9.     <animate attributeName="x" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="0" />
  10.     <animate attributeName="y" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="100" to="0" />
  11.     <animate attributeName="width" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="800" />
  12.     <animate attributeName="height" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="100" to="300" />
  13.     <animate attributeName="fill" attributeType="CSS" from="lime" to="red" begin="2s" dur="4s" fill="freeze" />
  14.   </rect>
  15.   <g transform="translate(100,100)">
  16.     <text id="TextElement" x="0" y="0" style="font-family:Verdana;font-size:24; visibility:hidden"> It's SVG!
  17.       <set attributeName="visibility" attributeType="CSS" to="visible" begin="1s" dur="5s" fill="freeze" />
  18.       <animateMotion path="M 0 0 L 100 100" begin="1s" dur="5s" fill="freeze" />
  19.       <animate attributeName="fill" attributeType="CSS" from="red" to="blue" begin="1s" dur="5s" fill="freeze" />
  20.       <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-30" to="0" begin="1s" dur="5s" fill="freeze" />
  21.       <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="3" additive="sum" begin="1s" dur="5s" fill="freeze" />
  22.     </text>
  23.   </g>
  24.   对不起，您的浏览器不支持 SVG.
  25. </svg>
  27. </body>
  28. </html>
运行一下

旋转的椭圆：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <p>旋转的椭圆</p>
  7. <svg width="100%" height="300px">
  8. <g id="R1" transform="translate(250 250)">
  9.   <ellipse rx="100" ry="0" opacity=".3">
  10.   <animateTransform attributeName="transform" type="rotate" dur="7s" from="0" to="360" repeatCount="indefinite" />
  11.   <animate attributeName="cx" dur="8s" values="-20; 220; -20" repeatCount="indefinite" />
  12.   <animate attributeName="ry" dur="3s" values="10; 60; 10" repeatCount="indefinite" />
  13.   </ellipse>
  14. </g>
  15. <use xlink:href="#R1" transform="rotate(72 390 150)" />
  16. <use xlink:href="#R1" transform="rotate(144 390 150)" />
  17. <use xlink:href="#R1" transform="rotate(216 390 150)" />
  18. <use xlink:href="#R1" transform="rotate(288 390 150)" />
  19. </svg>
  21. </body>
  22. </html>
运行一下
SVG 放射性渐变
SVG 全部元素

分类导航

HTMLHTML5JAVASCRIPTCSSjQueryBootstrap 3 教程SassReactHTMl 颜色教程JSONXMLXPathTypeScriptAppML 教程XLinkXPointerXQueryXFormsXsltXML SchemaXSL-FOWeb ServiceWSDSOAPW3CSVGDHTMLTCP/IPjQuery Mobile 教程XHTML