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 秒时间淡出的矩形
  • 矩形会变大并改变颜色
  • 会改变颜色的三个矩形
  • 沿一个运动路径移动的文本
  • 沿一个运动路径移动、旋转并缩放的文本
  • 沿一个运动路径移动、旋转并缩放的文本 + 逐步放大并改变颜色的矩形

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了