阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      SVG 实例

      SVG 实例


      在线实例

      下面的例子是把SVG代码直接嵌入到HTML代码中。

      谷歌Chrome,火狐,Internet Explorer9,和Safari都支持。

      **注意:**下面的例子将不会在Opera运行,即使Opera支持SVG - 它也不支持SVG在HTML代码中直接使用。


      SVG 实例

      SVG基本形状

      • 一个圆
      • 矩形
      • 不透明矩形
      • 一个矩形不透明2
      • 一个带圆角矩形
      • 一个椭圆
      • 累叠而上的三个椭圆
      • 两个椭圆
      • 一条线
      • 三角形
      • 四边形
      • 一个星星
      • 另一个星星
      • 折线
      • 另一个折线
      • 路径
      • 二次贝塞尔曲线
      • 编写文字
      • 旋转文本
      • 路径上文字
      • 几行文字
      • 文本链接
      • 定义一条线,文本或轮廓颜色(stroke)
      • 定义一条线宽度,文本或轮廓(stroke-width)
      • stroke-linecap属性定义不同类型的开放路径的终结:
      • 定义虚线(stroke-dasharray)

      SVG滤镜

      • feGaussianBlur - 模糊效果
      • feOffset - 偏移一个矩形,然后混合偏移图像顶部
      • feOffset - 模糊偏移图像
      • feOffset - 使阴影变黑色
      • feOffset - 为阴影涂上一层颜色
      • 一个feBlend滤镜
      • 一个feColorMatrix滤镜
      • 一个feComponentTransfer滤镜
      • feOffset、feFlood、feComposite、feMerge 以及 feMergeNode
      • 一个feMorphology滤镜
      • 滤镜1
      • 滤镜2
      • 滤镜3
      • 滤镜4
      • 滤镜5
      • 滤镜6

      SVG渐变

      • 水平线性渐变从黄色到红色的椭圆形
      • 垂直线性渐变从黄色到红色椭圆形
      • 水平线性渐变从黄色到红色并添加一个椭圆内文本
      • 放射性渐变从白色到蓝色椭圆
      • 放射性渐变从白色到蓝色的另一个椭圆

      SVG杂项

      • 重复用 5 秒时间淡出的矩形
      • 矩形会变大并改变颜色
      • 会改变颜色的三个矩形
      • 沿一个运动路径移动的文本
      • 沿一个运动路径移动、旋转并缩放的文本
      • 沿一个运动路径移动、旋转并缩放的文本 + 逐步放大并改变颜色的矩形
      目录
      目录