中国最全IT社区平台 联系我们 | 收藏本站
华晨云阿里云优惠2

svg教程

  • SVG 教程
  • SVG 简介
  • SVG 实例
  • SVG 在 HTML 中
  • SVG 矩形
  • SVG 圆形
  • SVG 椭圆
  • SVG 直线
  • SVG 多边形
  • SVG 曲线
  • SVG 路径
  • SVG 文本
  • SVG Stroke 属性
  • SVG 滤镜
  • SVG 模糊效果
  • SVG 阴影
  • SVG 渐变 – 线性
  • SVG 渐变- 放射性
  • SVG 实例
  • SVG 参考手册
    • ←上一篇： SVG 渐变- 放射性

    SVG 实例

    阅读 (2456)

    SVG 实例

    在线实例

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

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

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

    SVG 实例

    SVG基本形状

    一个圆

    矩形

    不透明矩形

    一个矩形不透明2

    一个带圆角矩形

    一个椭圆

    累叠而上的三个椭圆

    两个椭圆

    一条线

    三角形

    四边形

    一个星星

    另一个星星

    折线

    另一个折线

    路径

    二次贝塞尔曲线

    编写文字

    旋转文本

    路径上文字

    几行文字

    文本链接

    定义一条线，文本或轮廓颜色（stoke）

    定义一条线宽度，文本或轮廓（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 秒时间淡出的矩形

    矩形会变大并改变颜色

    会改变颜色的三个矩形

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

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

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

    ←上一篇： SVG 渐变- 放射性

    程序员人生，我编程，我富裕，记住wfuyu网，php教程，php学习，php手册，CMS模版制作

    声明：本站大部分内容是作者原创，少部分收集于互联网供大家一起学习，原版权很多不明，如有侵权请联系本站，谢谢！

    粤ICP备14040726号-1   2015-2020 程序员人生 版权所有

    平平安安 备案网站
    关闭
    程序员人生