SVG 实例

• 

  尝试一下示例

  下面的示例将 SVG 代码直接嵌入 HTML 代码中。

  Firefox，Internet Explorer 9，Google Chrome，Opera 和 Safari 等浏览器支持此功能。
• 

  SVG 基本形状

  下表的示例演示了 SVG 基本形状

  描述	示例
  SVG 圆	尝试一下
  SVG 矩形	尝试一下
  SVG 具有不透明度的矩形	尝试一下
  SVG 整个元素的不透明度	尝试一下
  SVG 圆角矩形	尝试一下
  SVG 椭圆形	尝试一下
  SVG 彼此之间的三个椭圆	尝试一下
  SVG 两个椭圆	尝试一下
  SVG 一条线	尝试一下
  SVG 具有三边的多边形	尝试一下
  SVG 具有四个边的多边形	尝试一下
  SVG 实星	尝试一下
  SVG 空星	尝试一下
  SVG 折线	尝试一下
  SVG 仅有直线相连的折线	尝试一下
  SVG 一条路径	尝试一下
  SVG 二次贝塞尔曲线	尝试一下
  SVG 撰写文字	尝试一下
  SVG 旋转文字	尝试一下
  SVG 多行文字	尝试一下
  SVG 文本作为链接	尝试一下
  SVG 定义线条，文本或轮廓（笔划）的颜色	尝试一下
  SVG 定义线条，文本或轮廓的宽度（笔划宽度）	尝试一下
  SVG 为开放路径定义不同类型的结尾（描边线）	尝试一下
  SVG 定义虚线（stroke-dasharray）	尝试一下

• 

  SVG 滤镜

  下表的示例演示了 SVG 滤镜

  描述	示例
  SVG feGaussianBlur-模糊效果	尝试一下
  SVG feOffset-偏移矩形，然后将原始图像混合在偏移图像的顶部	尝试一下
  SVG feOffset-模糊偏移图像	尝试一下
  SVG feOffset-使阴影变黑	尝试一下
  SVG feOffset-将阴影填充转换颜色	尝试一下
  SVG feBlend 滤镜	尝试一下
  SVG 滤镜实例1	尝试一下
  SVG 滤镜实例2	尝试一下
  SVG 滤镜实例3	尝试一下
  SVG 滤镜实例4	尝试一下
  SVG 滤镜实例5	尝试一下
  SVG 滤镜实例6	尝试一下

• 

  SVG 渐变

  下表的示例演示了 SVG 渐变

  描述	示例
  SVG 具有从黄色到红色的水平线性渐变的椭圆	尝试一下
  SVG 具有从黄色到红色的垂直线性渐变的椭圆	尝试一下
  SVG 具有从黄色到红色的水平线性渐变的椭圆和一个文本	尝试一下
  SVG 具有从白色到蓝色的径向渐变的椭圆	尝试一下
  SVG 从白色到蓝色的径向渐变的另一个椭圆	尝试一下

• 

  SVG 动画

  下表的演示了 SVG 动画实例

  描述	示例
  SVG 矩形在5秒钟内反复消失	尝试一下
  SVG 一个不断变化的矩形，它将改变颜色	尝试一下
  SVG 三个将改变颜色的矩形	尝试一下
  SVG 沿运动路径移动文本	尝试一下
  SVG 沿运动路径移动，旋转和缩放文本	尝试一下
  SVG 沿着运动路径+会改变颜色的不断增长的矩形移动，旋转和缩放文本	尝试一下
  SVG 旋转椭圆	尝试一下