SVG入门

html5

浏览数:606

2017-12-23

SVG意为可缩放矢量图形(Scalable Vector Graphics),是使用XML来描述二维图形和绘图程序的语言。

SVG简介

  • SVG指可伸缩矢量图形
  • SVG用来定义用于网络的基于矢量的图形
  • SVG使用XML格式定义图形
  • SVG图像在放大或改变尺寸的情况下其图形质量不会有所损失

SVG在HTML中

SVG文件可通过标签嵌入HTML中:

  • embed
  • object
  • iframe
  • 直接嵌入

embed

使用ebmed标签嵌入SVG,主流浏览器都支持,并且允许使用脚本。
例如:


object

使用object标签嵌入SVG,主流浏览器都支持,但不允许使用脚本。
例如:


iframe

使用iframe标签嵌入SVG,主流浏览器都支持,并且允许使用脚本。
例如:


直接嵌入

例如:


    

SVG路径

path标签用来定义路径
以下属性用来定义路径属性:

  • M = moveto 移动到
  • L = lineto 画线到
  • H = horizontal lineto 水平线到
  • V = vertical lineto 垂直线到
  • C = curveto 三次贝塞尔曲线
  • S = smooth curveto 光滑三次贝塞尔曲线
  • Q = quadratic Belzier curve 二次贝塞尔曲线
  • T = smooth quadratic Belzier curveto 光滑二次贝塞尔曲线
  • A = elliptical Arc 椭圆弧
  • Z = closepath 关闭路径

SVG路径动画

基于path的不同属性我们可以画出各种各样的路径,再结合stroke可以是线条动起来。
先介绍两个属性:
stroke-dasharray:指定画出路径每段的长度和各段之间空隙的长度
stroke-dashoffset:指定每段的起始偏移量
利用CSS3动画属性动态改变偏移量就可以使线条产生动画效果。

CSS

.svg path{
    stroke-dasharray: 600 600;
    animation: dash ease 2s 0s infinite;
}

@keyframes dash{
    from{
        stroke-dashoffset: 0;
    }

    to{
        stroke-dashoffset: 600;
    }
}

SVG


    
        
        
        
        
    

效果

总结

先简单介绍一些SVG知识,了解SVG动画的原理,通过这些属性可以帮助我们构建更丰富的UI界面。

原文链接:http://www.bestvist.com/2017/11/08/svg/