SVG

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

原文链接

SVG简介

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

SVG在HTML中

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

• embed
• object
• iframe
• 直接嵌入

embed

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

<embed src="example.svg" type="image/svg+xml" />

object

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

<object data="example.svg" type="image/svg+xml"></object>

iframe

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

<iframe src="example.svg"></iframe>

直接嵌入

例如:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="#000" />
</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 class="svg" xmlns="http://www.w3.org/2000/svg" width="600" height="400">
    <g>
        <path stroke="#00bfbf" id="svg_1" d="m31.532584,129.53322c-5.268304,-0.72224 -7.084974,-5.767751 -3.944029,-8.790559c4.168431,-4.674979 13.085107,-7.826499 20.071427,-4.876704c0.139239,-16.462479 0.058877,-32.925855 0.080173,-49.388733c17.419986,-2.664139 34.877634,-5.191255 52.304214,-7.832217c-0.037738,18.450795 -0.075478,36.901597 -0.113216,55.352385c-2.730045,5.580632 -11.551503,9.450454 -19.232741,7.719991c-4.573032,-1.037724 -5.669362,-5.512458 -3.122906,-8.254195c3.487116,-4.089812 9.977514,-6.897826 16.502461,-6.131761c1.862035,-0.142792 4.604007,2.142513 3.816994,-0.442752c0,-12.933004 0,-25.866004 0,-38.799001c-15.990809,2.440272 -32.013225,4.764633 -48.011432,7.178496c-0.054611,15.050094 0.135937,30.102474 -0.142537,45.150722c-0.509068,4.570867 -6.296733,7.689358 -11.699424,8.907769c-2.134316,0.272848 -4.356646,0.442152 -6.508982,0.206557l-0.000003,0.000002zm41.713646,-61.359c8.216135,-1.225722 16.436142,-2.436724 24.648728,-3.676028c1.045162,-3.156418 -3.632262,-1.106549 -5.919749,-1.029494c-14.028576,2.099321 -28.065255,4.167562 -42.091683,6.275037c-1.045162,3.156418 3.632259,1.106549 5.919746,1.029494c5.813738,-0.868598 11.628237,-1.734226 17.442958,-2.599011l0,0.000002z" stroke-width="1.5" fill="#fff"/>
        <path id="svg_2" d="m140.798268,258.298251c-3.64942,-0.662659 -4.696788,-7.029997 -2.278033,-10.355423c2.648102,-4.722219 7.716052,-7.702803 11.854901,-4.794739c0.168624,-17.995313 0.073223,-35.994534 0.098419,-53.991776c20.896068,-5.663536 41.820611,-11.139983 62.725741,-16.74392c-0.060233,19.895839 0.146968,39.798445 -0.145535,59.68915c-0.501936,5.131048 -4.36797,8.538786 -7.848463,9.604421c-3.049936,1.266499 -7.344546,-1.477499 -6.622152,-6.425283c0.893121,-5.351292 4.968321,-9.207141 8.885788,-9.676053c2.191084,-0.742304 5.25584,3.196377 4.254856,-2.04204c0.024279,-13.582205 -0.018233,-27.164228 -0.033588,-40.746451c-9.732594,2.590217 -19.463219,5.194031 -29.197651,7.771614c-0.05931,16.636552 0.141199,33.28004 -0.146578,49.911257c-0.587623,5.351113 -4.741564,8.888955 -8.461283,9.570645c-3.682707,1.349866 -7.548476,-3.843937 -5.467896,-8.678493c2.29815,-5.800126 8.158016,-9.749642 12.714426,-6.381025c0.034643,-14.46333 0.14645,-28.933765 -0.052884,-43.394253c-2.464278,-0.725417 -6.252756,1.544504 -9.169239,1.871039c-6.686721,1.78039 -13.371736,3.571618 -20.057669,5.357694c-0.091333,17.002728 0.032413,34.013805 -0.277673,51.009604c-1.574323,5.606365 -6.425989,9.261879 -10.775481,8.44403l0,0l-0.000005,0zm25.881622,-67.339346c4.811641,-1.285896 9.623152,-2.571734 14.434796,-3.857586c0.810444,-4.591538 -3.655415,-0.621698 -5.444285,-0.877596c-7.943464,2.164852 -15.885488,4.339324 -23.832365,6.480901c-0.460339,4.701779 4.790645,-0.12745 6.746296,0.409016c2.699046,-0.715107 5.397432,-1.433766 8.095555,-2.154736l0.000003,0zm30.44429,-8.208515c4.828572,-1.315024 9.681677,-2.512287 14.494756,-3.905528c0.721091,-4.570772 -4.639726,0.147518 -6.516774,-0.377996c-7.487066,1.982085 -15.003134,3.815423 -22.473926,5.879437c-0.799425,4.836107 4.655222,0.016031 6.608902,0.501516c2.628841,-0.700139 5.257938,-1.399141 7.887039,-2.097429l0.000003,0z" fill-opacity="null" stroke-width="1.5" stroke="#d4aaff" fill="#fff"/>
        <path id="svg_3" d="m305.853425,190.295242c-6.905749,-0.762869 -9.287059,-6.092151 -5.169876,-9.284973c5.464024,-4.937918 17.152097,-8.266698 26.30984,-5.150996c0.182491,-17.445591 0.077201,-34.892141 0.105096,-52.338161c22.833774,-2.759327 45.719174,-5.364616 68.56093,-8.101102c-0.049479,19.488539 -0.098938,38.977078 -0.148404,58.465617c-3.578596,5.894502 -15.141845,9.98198 -25.210502,8.15419c-5.994379,-1.096089 -7.431456,-5.822501 -4.093538,-8.718437c4.570953,-4.319838 13.078636,-7.285786 21.631598,-6.476634c2.440779,-0.150824 6.03501,2.263016 5.003369,-0.467654c-0.084727,-15.414587 0.210726,-30.833282 -0.21801,-46.244623c-3.726463,-0.8451 -10.353637,1.099295 -15.12495,1.256607c-15.955489,1.896867 -31.945088,3.693217 -47.863933,5.700964c0.480318,17.079901 0.256342,34.170258 0.184835,51.253771c0.845152,3.899696 -2.673512,7.573149 -8.02367,9.60598c-4.616787,2.051407 -10.320807,2.790909 -15.942781,2.345458l-0.000004,-0.000008z" fill-opacity="null" stroke-width="1.5" stroke="#aaff56" fill="#fff"/>
        <path id="svg_4" d="m435.929715,330.407142c-6.042054,-0.602637 -10.695686,-4.161175 -9.35643,-7.969603c1.585538,-5.026389 9.001771,-8.569207 16.270481,-10.536402c5.879366,-1.473351 13.061008,-1.717604 18.653537,0.347257c0.222809,-24.191178 0.097547,-48.383367 0.130581,-72.575005c1.973624,-0.051763 4.234405,-0.304682 3.6957,1.403462c0.160354,4.027812 4.045284,7.424439 8.872087,9.944282c10.253283,5.81621 21.619776,12.544543 22.523257,21.65426c0.966163,3.568994 -2.144981,7.081742 -0.827717,10.546334c1.257376,3.414881 0.882515,6.959832 0.088377,10.392241c3.733984,6.160452 2.832337,13.253443 -1.235548,19.268841c0.375769,1.879939 -6.859194,4.946999 -3.689911,1.813892c4.279513,-5.714419 6.530769,-12.7426 1.889955,-18.622745c-5.620474,-5.699101 -15.848604,-8.621247 -24.235604,-12.512242c-5.837633,-3.617483 -2.690833,3.411183 -3.56049,5.506473c-0.129778,10.278306 -0.140043,20.556986 -0.203584,30.835496c-2.613627,3.915526 -7.407703,7.230518 -13.792615,8.93027c-4.680822,1.344325 -10.058359,2.233071 -15.222072,1.57319l-0.000005,0zm56.931766,-44.308704c-3.617454,-7.982495 -15.12623,-13.392561 -26.361671,-17.29154c-3.075627,-0.264632 0.911866,4.314759 1.775923,5.73285c4.02422,4.85547 11.948774,7.72154 17.663197,11.731735c2.492894,1.270724 5.330679,3.892909 7.276125,4.594401c0.282683,-1.581732 0.111529,-3.204188 -0.353569,-4.767449l-0.000005,0.000003zm0.455125,-10.889064c-0.057251,-6.709369 -8.24785,-12.057296 -16.186476,-16.050468c-3.701524,-1.507322 -8.177811,-4.045444 -11.979479,-4.349767c0.723479,3.734717 3.444838,7.391921 8.443979,9.682634c7.112396,4.246919 14.63188,8.483186 19.566742,13.816685c0.568091,-0.927171 0.064988,-2.109895 0.155234,-3.099084z" fill-opacity="null" stroke-width="1.5" stroke="#ff5656" fill="#fff"/>
    </g>
</svg>

效果

image

总结

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