简要教程
这是一款很酷的html5 svg线条动态绘制文字轮廓边框动画特效。SVG路径动画在网页设计中是一项热门的技术，它允许我们绘制各种简单、精美的图标和文字。关于使用SVG制作图标方面的知识，请参考阅读ESSENTIAL ICONS。
制作流程
先用一张gif图片来看看效果：
制作SVG
1、首先你要下载和安装一款矢量图形编辑器，推荐使用Inkscape。
2、打开Inkscape，创建一个新的文档。在文档的左上角创建你的文字。
3、使用选择工具选取你创建的文字。
4、在Path菜单中，选择Object --> Path。然后保存为SVG。
5、使用文本编辑器打开你刚才保存的SVG。将一些不需要的标签去掉，每个路径只保留path部分即可，见下图：
CSS
1、创建一个div作为包裹容器包住SVG。给这个div一个id，然后添加下面的css代码：
#YOUR-SVG-CONTAINER { //ADJUST NAME TO MATCH YOUR ID
position: relative;
width: 360px; //ADJUST WIDTH TO MATCH WIDTH OF YOUR TEXT
height: 110px; //ADJUST HEIGHT TO MATCH HEIGHT OF YOUR TEXT
margin: 40vh auto 0 auto;
}
2、给你的SVG元素一个id，然后添加下面的CSS代码：
#svg-canvas { //ADJUST NAME TO MATCH YOUR ID
position: relative;
width: 360px; //ADJUST WIDTH TO MATCH WIDTH OF YOUR TEXT
height: 110px; //ADJUST HEIGHT TO MATCH HEIGHT OF YOUR TEXT
}
3、确保你的每个路径元素看起来像下面这样：
<path class="title" fill-opacity="0" stroke="#000" stroke-width="1.5" d="" />
4、在你的样式表中添加下面的代码。下面的css代码将以线条绘制文字轮廓。关于下面代码的说明请点击这里。
.title {
stroke-dasharray: 500;
stroke-dashoffset: 500;
animation: draw 5s linear forwards;
-webkit-animation: draw 8s linear forwards;
-moz-animation: draw 8s linear forwards;
-o-animation: draw 8s linear forwards;
font-weight: bold;
font-family: Amatic SC;
-inkscape-font-specification: Amatic SC Bold"
}
@keyframes draw {
to {
stroke-dashoffset: 0;
}
}
@-webkit-keyframes draw {
to {
stroke-dashoffset: 0;
}
}
@-moz-keyframes draw {
to {
stroke-dashoffset: 0;
}
}
@-o-keyframes draw {
to {
stroke-dashoffset: 0;
}
}
出处：http://www.htmleaf.com/html5/html5donghua/20141203663.html
DEMO: 点击这里看效果
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>text svg</title>
<style type="text/css">
body {
background-color: #212A3F;
}
#svg-container {
position: relative;
width: 940px;
height: 110px;
margin: 40vh auto 0 auto;
}
#svg-canvas {
position: relative;
width: 940px;
height: 110px;
}
.title {
stroke-dasharray: 500;
stroke-dashoffset: 500;
animation: draw 5s linear forwards;
-webkit-animation: draw 5s linear forwards;
-moz-animation: draw 5s linear forwards;
-o-animation: draw 5s linear forwards;
font-style:normal;
font-variant:normal;
font-weight:normal;
font-stretch:semi-expanded;
font-size:69.40313721px;
font-family:Ravie;
-inkscape-font-specification:'Ravie Semi-Expanded'
}
@keyframes draw {
to {
stroke-dashoffset: 0;
}
}
@-webkit-keyframes draw {
to {
stroke-dashoffset: 0;
}
}
@-moz-keyframes draw {
to {
stroke-dashoffset: 0;
}
}
@-o-keyframes draw {
to {
stroke-dashoffset: 0;
}
}
</style>
</head>
<body>
<div id="svg-container">
<svg id="svg-canvas">
<path class="title" fill-opacity="0" stroke="#FFF" stroke-width="1.5"
d="m 58.963004,17.880108 q 0,2.270513 -5.21879,3.863261 -4.608802,1.423306 -9.759816,1.423306 -4.812132,0 -7.895963,-1.796077 -3.558266,-2.101072 -3.558266,-6.032109 0,-5.083237 11.725335,-5.083237 6.506544,0 10.742575,2.406065 3.964925,2.236625 3.964925,5.218791 z m 0.271106,48.053539 q -6.879315,-1.253865 -14.639724,-1.253865 -7.489303,0 -20.942939,2.473842 0.508324,-2.50773 1.152201,-5.828779 5.42212,-0.643877 7.048756,-2.575507 1.660524,-1.965518 2.778836,-7.252085 1.084424,-5.015462 1.084424,-9.793705 0,-5.083237 -4.303807,-5.083237 -1.35553,0 -2.575507,0.304994 -1.863854,-4.100479 -1.863854,-5.862668 13.894182,-0.101664 25.9584,-4.574913 0.135553,0.101664 0.135553,0.5761 0,0.745541 -0.338883,2.71106 -2.168848,11.996441 -2.168848,19.96018 0,5.523784 1.321642,7.218197 0.813318,1.050536 2.304401,1.050536 1.694412,0 3.863261,-0.914983 0.609988,-0.237218 0.711653,0.5761 0.372771,2.948278 0.474435,8.268733 z"/>
<path class="title" fill-opacity="0" stroke="#FFF" stroke-width="1.5"
d="m 125.11287,25.877735 q 0,5.659338 -9.7937,7.963739 -3.82938,0.914983 -6.94709,0.914983 -3.93104,0 -6.30322,-1.253866 -2.473842,-1.321641 -2.439953,-3.727707 0.06778,-3.49049 2.406063,-5.930444 1.66053,-1.728301 4.64269,-2.982166 1.82997,-0.677765 3.65993,-1.389418 1.01665,-0.474436 1.01665,-1.084424 0,-0.643877 -1.93163,-0.643877 -12.57254,0 -22.569574,20.468503 l 0.06778,0 q 0.06778,0 1.084424,-0.06778 1.050535,-0.06778 2.067183,-0.06778 8.641504,0 18.09633,4.744355 14.7075,7.319863 14.7075,22.67124 -12.23366,-0.203329 -19.6213,-0.203329 -6.065997,0 -7.353751,0.203329 -0.372771,-1.016647 -0.372771,-2.270513 0,-1.558859 0.711653,-1.728301 3.083831,-0.914982 4.134369,-1.457194 2.03329,-1.084424 2.03329,-2.71106 0,-3.931037 -4.77824,-7.862074 -5.591562,-4.574914 -13.5553,-4.574914 -0.881095,0 -0.881095,0.847206 0.77943,7.218197 6.370991,22.806793 -3.354937,-1.660525 -9.454822,-3.422714 -7.624856,-2.168848 -12.606429,-2.168848 -3.592155,0 -5.354344,1.152201 l 0.135553,-8.810945 q 1.253866,-0.406659 2.91439,-0.406659 2.71106,0 5.828779,1.457194 -2.270513,-6.167661 -3.795484,-15.046383 -1.592748,-9.387045 -1.592748,-17.520225 0,-0.406659 0.03389,-1.152201 0.03389,-0.745541 0.03389,-1.186089 0,-1.93163 -1.626636,-2.880501 -1.219977,-0.711653 -5.04935,-1.55886 -0.881094,-0.203329 -0.813318,-3.693819 12.436988,-1.118312 28.500019,-3.253272 -5.388232,12.19977 -5.388232,24.772311 0,2.168848 0.06778,3.185496 4.744355,-12.4031 9.997034,-17.960773 6.879315,-7.218197 17.689668,-7.218197 9.99703,0 14.57195,8.031515 1.45719,2.575507 1.45719,5.015461 z"/>
<path class="title" fill-opacity="0" stroke="#FFF" stroke-width="1.5"
d="m 175.8097,44.143502 q 0,1.728301 -0.13556,4.06659 0,0.406659 -0.33888,0.304995 -5.761,-1.287754 -18.87575,-3.422714 -11.65756,-1.863854 -12.19977,-1.863854 -0.77943,0 -0.77943,6.370992 0,8.031515 3.52437,11.99644 2.67718,3.016055 6.87932,3.219384 2.37218,0.101665 4.37158,-0.711653 0.77943,-0.304994 0.77943,-0.609989 0,-0.203329 -0.40666,-0.338882 -4.43936,-0.813318 -7.25208,-3.287161 -2.81273,-2.50773 -2.81273,-5.964332 0,-2.168848 2.43996,-3.490489 2.47384,-1.35553 6.70987,-1.35553 2.91439,0 6.16766,0.609988 8.74317,1.694413 8.74317,7.014868 0,1.491083 -0.81332,3.049942 -2.27051,4.26992 -5.62545,6.099886 -4.8799,2.643283 -14.84305,2.643283 -11.45423,0 -18.29965,-8.472063 -5.86267,-7.218197 -5.86267,-16.300248 0,-16.774684 27.41559,-16.774684 15.89359,0 19.55352,7.963739 1.66053,3.626043 1.66053,9.251492 z m -12.9792,-7.794297 q 0,-1.897742 -2.47384,-3.083831 -2.47385,-1.219977 -6.54044,-1.219977 -4.74435,0 -8.23484,0.881094 -4.10048,1.016648 -4.10048,2.744949 0,4.371584 13.99585,4.371584 7.35375,0 7.35375,-3.693819 z"/>
<path class="title" fill-opacity="0" stroke="#FFF" stroke-width="1.5"
d="m 225.96431,44.143502 q 0,1.728301 -0.13556,4.06659 0,0.406659 -0.33888,0.304995 -5.761,-1.287754 -18.87575,-3.422714 -11.65756,-1.863854 -12.19977,-1.863854 -0.77943,0 -0.77943,6.370992 0,8.031515 3.52437,11.99644 2.67718,3.016055 6.87932,3.219384 2.37218,0.101665 4.37158,-0.711653 0.77943,-0.304994 0.77943,-0.609989 0,-0.203329 -0.40666,-0.338882 -4.43936,-0.813318 -7.25208,-3.287161 -2.81273,-2.50773 -2.81273,-5.964332 0,-2.168848 2.43996,-3.490489 2.47384,-1.35553 6.70987,-1.35553 2.91439,0 6.16766,0.609988 8.74317,1.694413 8.74317,7.014868 0,1.491083 -0.81332,3.049942 -2.27051,4.26992 -5.62545,6.099886 -4.8799,2.643283 -14.84305,2.643283 -11.45423,0 -18.29966,-8.472063 -5.86266,-7.218197 -5.86266,-16.300248 0,-16.774684 27.41559,-16.774684 15.89359,0 19.55352,7.963739 1.66053,3.626043 1.66053,9.251492 z m -12.9792,-7.794297 q 0,-1.897742 -2.47385,-3.083831 -2.47384,-1.219977 -6.54043,-1.219977 -4.74435,0 -8.23484,0.881094 -4.10048,1.016648 -4.10048,2.744949 0,4.371584 13.99585,4.371584 7.35375,0 7.35375,-3.693819 z"/>
<path class="title" fill-opacity="0" stroke="#FFF" stroke-width="1.5"
d="m 278.62664,40.246353 q 0,2.812725 -0.60999,6.574321 -1.11831,6.811538 -5.32045,11.149234 -4.9138,5.117126 -12.80976,5.117126 -8.91261,0 -15.04639,-6.269326 1.7283,7.895962 2.23663,9.759816 1.62663,5.761003 4.57491,12.335323 -19.04519,2.575507 -24.8062,3.795484 -0.40666,-1.660524 -0.40666,-2.846613 0,-1.491083 0.47444,-1.660524 5.761,-1.965519 5.761,-4.439361 0,0.169441 -0.20333,-2.744948 -0.20333,-2.880501 -0.20333,-7.116533 0,-16.130807 2.77884,-25.822847 -2.84661,1.762189 -5.55767,1.762189 -1.08443,0 -1.86386,-0.304994 l -0.77943,-8.370398 q 1.99941,0.609989 4.94769,0.609989 8.20095,0 16.02914,-4.168255 -1.38942,5.049349 -1.38942,6.608209 5.79489,-3.964926 12.64032,-4.812132 3.38882,-0.406659 6.30321,-0.406659 7.28598,0 10.43758,2.948278 2.81273,2.643284 2.81273,8.302621 z m -9.35316,4.371585 q 0,-1.660525 -3.32105,-2.677172 -3.42271,-1.084424 -9.25149,-1.084424 -4.77824,0 -9.72593,2.541619 -4.91379,2.50773 -4.91379,4.744355 0,1.253865 2.37217,2.168848 2.77884,1.016647 7.76041,1.016647 6.03211,0 11.5559,-2.202736 5.52378,-2.202736 5.52378,-4.507137 z"/>
<path class="title" fill-opacity="0" stroke="#FFF" stroke-width="1.5"
d="m 335.15226,45.600697 q 0,3.185496 -1.25387,8.031515 -1.66052,6.472656 -9.14983,10.234252 -7.79429,3.931037 -20.12962,3.931037 -12.0981,0 -19.14686,-4.710467 -5.89655,-3.897149 -5.89655,-8.91261 0,-3.219383 2.47384,-5.523784 2.81272,-2.643284 8.13318,-3.354937 2.64328,-0.338883 5.42212,-0.338883 5.72711,0 9.04816,1.660524 3.21938,1.592748 3.21938,4.236032 0,3.998813 -4.26991,6.743762 -2.0333,1.321641 -6.9471,3.049942 -1.89774,0.643877 -1.89774,1.186089 0,1.660524 7.01487,1.660524 5.52378,0 9.35316,-1.592748 4.74435,-1.965518 4.74435,-5.693226 0,-0.542212 -0.13555,-1.253865 -1.93163,-9.895369 -2.8805,-11.826999 -2.0333,-3.998814 -7.72652,-3.998814 -1.49109,0 -5.11713,0.406659 -3.59215,0.372771 -5.1849,0.372771 -10.94591,0 -10.94591,-8.844834 0,-2.812724 1.11832,-6.845426 1.49108,-5.489897 6.67598,-8.743169 6.20155,-3.897149 16.91024,-3.897149 11.01368,0 17.18134,3.456602 5.59156,3.151607 5.59156,7.997627 0,7.218197 -11.522,7.218197 -5.62545,0 -9.55649,-1.863853 -3.69382,-1.728301 -3.69382,-3.964926 0,-3.219383 4.9138,-5.083237 1.86385,-0.609989 3.76159,-1.219977 1.7283,-0.643877 1.7283,-1.321642 0,-0.914983 -2.40606,-1.592748 -2.37218,-0.711653 -5.38823,-0.711653 -3.72771,0 -6.09989,1.186089 -2.84661,1.423306 -2.84661,4.236031 0,1.321642 0.64388,2.91439 0.91498,3.049942 1.82996,6.099885 1.05054,3.253272 3.11772,4.676578 2.71106,1.863854 8.43817,1.863854 0.50833,0 3.21939,-0.101665 2.71106,-0.135553 4.06659,-0.135553 6.50654,0 9.62426,1.863854 3.96493,2.406066 3.96493,8.505951 z"/>
<path class="title" fill-opacity="0" stroke="#FFF" stroke-width="1.5"
d="m 389.27178,50.58227 q 0,2.13496 -1.7283,5.286567 -5.25268,9.454822 -25.14508,10.403693 -2.8805,0.135553 -3.38882,0.135553 -7.86208,0 -11.58979,-2.71106 -4.57491,-3.321049 -4.57491,-11.589782 0,-8.777057 5.1849,-21.180157 -4.47325,0.20333 -11.38645,1.762189 -0.40666,0.06778 -0.54221,-0.440547 -0.0678,-0.271106 -0.0678,-1.863854 0,-4.541025 0.91498,-7.35375 4.30381,1.863854 11.21701,2.202736 -0.10166,-2.744948 -0.88109,-6.167661 -0.77943,-3.287161 -0.77943,-3.388825 0,-0.304995 0.10167,-0.338883 0.10166,-0.06778 0.2711,-0.06778 2.23663,0 10.53925,-0.677765 8.30262,-0.677765 12.57254,-1.219977 0.71165,-0.06778 0.74554,0 0,0.169441 -2.50773,4.269919 -2.94828,4.812132 -4.43936,8.370398 1.08442,0 2.3044,0 8.6415,-0.06778 8.87872,-0.77943 0.27111,-0.745541 0.27111,-1.524971 0,-2.270513 -2.50773,-4.134367 6.20155,-3.388825 8.33651,-3.558266 0.64387,1.084424 0.64387,3.253272 0,0.914983 -0.13555,2.677172 -0.10166,1.762189 -0.10166,2.473842 0,1.931631 1.11831,5.794891 1.11831,3.829373 2.37218,6.40488 -1.42331,0.677765 -2.84662,1.321641 -2.23662,0.98276 -3.32105,0.98276 -0.64387,0 -0.91498,-0.271106 -0.40666,-0.271106 -1.86385,-3.69382 -1.38942,-3.185495 -3.11772,-3.321048 -0.8811,-0.06778 -10.64091,-0.06778 -0.64388,0.508324 -1.66053,6.506544 -1.18609,6.675986 -1.18609,12.369212 0,12.064217 5.42212,12.064217 2.84662,0 6.43877,-1.55886 3.62604,-1.558859 3.62604,-2.677171 0,-0.338883 -0.33888,-0.542212 -2.03329,-0.474436 -6.87931,-2.643284 -4.50714,-2.677172 -4.50714,-7.285974 0,-2.13496 2.40607,-3.49049 2.5755,-1.423306 7.01486,-1.423306 3.28716,0 7.5232,0.881094 9.14982,1.965519 9.14982,6.811539 z"/>
<path class="title" fill-opacity="0" stroke="#FFF" stroke-width="1.5"
d="m 447.86458,27.944918 q 0,3.117719 -0.50832,3.49049 -2.77884,-0.5761 -4.84602,-0.5761 -2.74495,0 -2.98217,1.253865 -0.71165,3.422714 -1.38941,10.098699 -0.77943,7.387639 -0.77943,12.064217 l 0,1.457195 q 1.89774,-0.914983 4.23603,-0.914983 2.06718,0 3.82937,0.609989 l 0.47443,5.557673 -0.74554,0 q -4.23603,0 -11.48811,3.016054 -5.4899,2.270513 -10.53925,5.252679 -0.74554,0.440547 -0.81332,0.406659 -0.20333,-0.06778 0.0678,-1.186089 1.32164,-5.354343 1.79608,-10.539246 -4.71047,5.456009 -10.33592,8.099292 -4.37158,2.033295 -8.33651,2.033295 -4.87991,0 -7.99763,-2.304401 -3.4566,-2.575507 -3.4566,-7.218197 0,-7.489304 5.15102,-15.012495 3.59215,-5.218791 8.74316,-9.319269 -0.47443,0 -1.49108,-0.03389 -1.01665,-0.03389 -1.49108,-0.03389 -5.93045,0 -12.16588,0.474436 0.40665,-0.77943 2.71106,-5.489897 8.33651,0.643877 14.7075,0.643877 2.94827,0 12.50476,-0.304994 -4.3377,5.354343 -7.38764,12.030329 -3.21938,7.048756 -3.21938,11.725334 0,2.71106 1.25386,4.371585 1.1522,1.524971 2.84662,1.524971 3.18549,0 7.04875,-9.251492 4.06659,-9.793705 5.01546,-21.722369 0.23722,-2.948278 0.27111,-4.371584 3.04994,0.745541 19.3163,4.168254 z"/>
<path class="title" fill-opacity="0" stroke="#FFF" stroke-width="1.5"
d="m 499.61193,64.171458 q -1.66052,-1.1522 -4.98157,-1.1522 -7.96374,0 -16.36803,4.981573 1.7283,-6.269327 1.7283,-7.692633 0,-0.542212 -0.2711,-0.304995 -2.91439,2.609396 -8.20096,4.134367 -5.28656,1.491083 -11.31867,1.491083 -7.42153,0 -10.64091,-3.049943 -2.88051,-2.744948 -2.88051,-8.539839 0,-2.778836 0.60999,-6.57432 1.18609,-7.116533 4.98158,-11.793111 4.84602,-5.964333 12.70809,-5.964333 4.16825,0 8.67539,2.168848 4.20215,2.033295 7.35375,5.320456 0,-0.135553 0.0339,-0.508324 0.0678,-0.406659 0.0678,-0.474435 0,-11.488117 -9.65815,-22.400134 12.03032,-1.660524 26.77171,-4.1682549 0.50833,1.6266359 0.50833,3.7954839 0,1.592748 -0.44055,2.101072 -4.81213,1.558859 -4.81213,3.524378 0,0.203329 0.0339,0.406659 1.7283,8.607615 1.7283,15.995254 0,11.454229 -4.16826,21.078492 2.8805,-1.728301 5.4899,-1.728301 1.38942,0 2.10107,0.338883 l 0.94887,9.014274 z M 482.9728,46.346238 q 0,-1.491083 -3.55827,-2.473842 -3.11771,-0.847206 -6.84542,-0.847206 -5.96433,0 -11.65756,2.270513 -5.69323,2.270512 -5.69323,4.574914 0,1.626636 3.28716,2.71106 3.45661,1.118312 9.11594,1.118312 5.25268,0 10.4037,-2.643284 4.94768,-2.50773 4.94768,-4.710467 z"/>
<path class="title" fill-opacity="0" stroke="#FFF" stroke-width="1.5"
d="m 560.74632,33.367038 -0.37277,3.964926 q -4.54103,-1.491083 -5.32046,-1.457195 -1.25386,0.06778 -2.03329,4.236031 -0.5761,3.083831 -1.38942,11.860888 -0.84721,9.251492 -1.86385,12.640318 -2.13496,7.014867 -5.89656,9.929257 -4.87991,3.727708 -15.21582,3.727708 -15.82582,0 -22.8068,-4.710467 -2.20273,-1.491083 -3.76159,-4.608802 -1.52497,-3.016055 -1.52497,-5.659338 0,-3.456602 3.55826,-5.286567 3.35494,-1.728301 9.21761,-1.728301 6.03211,0 10.13258,2.236624 3.72771,2.033295 3.72771,4.574914 0,5.151014 -7.21819,7.218198 -0.60999,0.169441 -5.15102,1.050535 -2.47384,0.508324 -2.47384,1.152201 0,1.457195 7.4893,1.457195 5.62545,0 7.99763,-1.253866 3.96492,-2.101071 6.16766,-6.709873 1.59275,-3.287161 1.59275,-5.557673 -0.10167,-0.813318 -11.55589,-9.658152 -11.72534,-9.082051 -15.48694,-11.047569 -1.28775,0 -7.65874,3.422713 -0.54221,0.304994 -0.54221,-0.271106 0,-1.423307 0.0339,-3.693819 0.0339,-2.270513 0.0339,-2.982166 l 0,-1.931631 q 16.84247,-2.744948 25.82285,-7.489303 0.84721,1.524971 2.64328,4.574914 -1.69441,0.440547 -5.69322,1.016647 0,3.659931 6.60821,10.064811 5.59156,5.388231 9.48871,7.35375 1.86385,-2.778837 4.81213,-9.217604 2.8805,-6.303215 2.8805,-7.489304 -7.11653,0.03389 -10.33592,-0.135553 0.50833,-2.134959 1.86386,-6.879314 9.89537,0.37277 22.23069,7.285973 z"/>
<path class="title" fill-opacity="0" stroke="#FFF" stroke-width="1.5"
d="m 592.77074,17.880108 q 0,2.270513 -5.21879,3.863261 -4.6088,1.423306 -9.75981,1.423306 -4.81213,0 -7.89597,-1.796077 -3.55826,-2.101072 -3.55826,-6.032109 0,-5.083237 11.72533,-5.083237 6.50655,0 10.74258,2.406065 3.96492,2.236625 3.96492,5.218791 z m 0.27111,48.053539 q -6.87932,-1.253865 -14.63972,-1.253865 -7.48931,0 -20.94294,2.473842 0.50832,-2.50773 1.1522,-5.828779 5.42212,-0.643877 7.04875,-2.575507 1.66053,-1.965518 2.77884,-7.252085 1.08442,-5.015462 1.08442,-9.793705 0,-5.083237 -4.3038,-5.083237 -1.35553,0 -2.57551,0.304994 -1.86386,-4.100479 -1.86386,-5.862668 13.89419,-0.101664 25.9584,-4.574913 0.13556,0.101664 0.13556,0.5761 0,0.745541 -0.33888,2.71106 -2.16885,11.996441 -2.16885,19.96018 0,5.523784 1.32164,7.218197 0.81332,1.050536 2.3044,1.050536 1.69441,0 3.86326,-0.914983 0.60999,-0.237218 0.71165,0.5761 0.37277,2.948278 0.47444,8.268733 z"/>
<path class="title" fill-opacity="0" stroke="#FFF" stroke-width="1.5"
d="m 647.05968,68.98359 q -0.50832,1.321642 -1.25386,3.321048 L 624.96455,68.40749 q 3.49048,-5.557673 3.49048,-17.283008 0,-3.117719 0,-3.117719 -0.23721,-5.557673 -2.91438,-5.557673 -0.84721,0 -2.23663,0.711653 -5.65934,2.846613 -8.03151,12.4031 0.0678,3.28716 3.11771,12.369211 -7.72652,-3.456601 -15.48693,-3.456601 -5.15101,0 -7.15042,1.796077 l 0.0678,-7.997627 q 1.08442,-0.474436 2.71106,-0.474436 2.40607,0 5.08324,1.253865 -1.89774,-2.677171 -3.42272,-13.284194 -0.91498,-6.57432 -1.25386,-11.62367 -0.16944,-2.71106 -3.25327,-3.219384 -1.01665,-0.101664 -2.98217,-0.474435 -0.91498,-0.271106 -0.91498,-2.982166 0,-0.847206 0.13555,-1.389418 0.64388,0.338882 26.80561,2.067183 -4.37159,6.913203 -4.37159,18.19799 4.13437,-12.77587 15.04639,-19.858514 3.01605,-1.931631 5.28656,-1.931631 3.96493,0 5.89656,5.354344 1.59275,4.337696 1.59275,11.217011 0,2.643283 -0.27111,5.286567 -0.98276,9.285381 -0.98276,14.300842 0,4.710467 0.91498,6.506544 1.89775,0.745541 5.21879,1.762189 z"/>
<path class="title" fill-opacity="0" stroke="#FFF" stroke-width="1.5"
d="m 698.16317,30.04599 -0.74554,7.624856 q -1.05054,0.338883 -1.89774,0.338883 -2.06719,0 -4.71047,-1.457195 5.62545,9.963146 5.62545,21.586816 0,2.846613 -0.40666,5.557673 -1.55886,10.132587 -6.50654,14.097512 -5.76101,4.64269 -19.65519,4.64269 -11.99644,0 -18.26577,-4.202143 -3.7277,-2.541619 -4.84602,-5.99822 -0.8472,-2.609395 -0.8472,-4.303808 0,-5.151014 8.53984,-6.811538 3.59215,-0.677765 7.01486,-0.677765 4.87991,0 7.89597,1.389418 2.91439,1.389418 2.91439,3.592155 0,5.015461 -6.70988,7.285973 -4.47325,1.524972 -5.28657,1.897742 -1.59274,0.745542 -1.59274,1.592748 0,1.253866 5.35434,1.253866 6.67599,0 11.42034,-2.372178 3.96493,-1.965519 5.761,-9.556487 1.18609,-5.083237 1.18609,-10.979793 0,-1.389418 -0.13555,-2.101071 -1.11831,2.643283 -5.4899,4.236031 -3.89715,1.389418 -8.60761,1.389418 -7.11654,0 -11.2509,-5.049349 -3.04994,-3.693819 -3.93104,-9.251493 -0.77943,-4.778243 -0.77943,-7.082644 0,-4.405473 2.16885,-6.472656 2.47384,-2.406066 8.40429,-2.406066 2.77883,0 7.01486,0.643877 7.25209,1.050536 10.81036,4.168255 0.33888,0.271106 0.33888,-0.169441 0,-1.016648 -1.32164,-6.032109 7.55708,4.574914 14.43639,4.574914 2.74495,0 4.10048,-0.948871 z m -14.09751,15.554707 q 0,-2.202736 -4.77825,-4.473249 -4.26992,-1.999407 -8.74317,-1.999407 -4.33769,0 -7.1843,0.813318 -3.21939,0.914983 -3.21939,2.575507 0,1.999407 4.74436,3.964925 4.77824,1.931631 10.03092,1.931631 4.13437,0 6.6421,-0.77943 2.50773,-0.813318 2.50773,-2.033295 z"/>
<path class="title" fill-opacity="0" stroke="#FFF" stroke-width="1.5"
d="m 722.9355,62.036498 q 0,2.067184 -4.20214,3.354937 -3.49049,1.084424 -7.38764,1.084424 -3.4566,0 -5.72711,-1.626636 -2.50773,-1.829965 -2.50773,-5.049349 0,-4.778243 9.2176,-4.778243 3.96492,0 7.15042,1.897742 3.4566,2.067183 3.4566,5.117125 z"/>
<path class="title" fill-opacity="0" stroke="#FFF" stroke-width="1.5"
d="m 778.71556,40.924118 q 0,7.794298 -11.79311,7.794298 -5.89655,0 -9.75981,-2.101072 -3.62605,-1.965518 -3.62605,-4.64269 0,-4.236031 4.43936,-6.675985 3.89715,-2.13496 9.35316,-2.13496 0.33888,0 0.33888,-0.135553 0,-0.508324 -2.50773,-1.321642 -2.91439,-0.982759 -5.99822,-0.982759 -13.69085,0 -13.69085,12.301435 0,1.321642 0.20333,3.117719 1.01665,8.573727 3.65993,11.793111 1.96552,2.372178 5.65934,2.372178 5.72711,0 10.74257,-2.270513 4.47325,-1.999407 7.15042,-5.151014 0.16945,-0.03389 0.27111,0.203329 -3.15161,13.318083 -15.69026,14.978607 -3.15161,0.406659 -6.43877,0.406659 -21.99347,0 -21.99347,-20.468503 0,-9.963146 5.42212,-14.741389 5.11712,-4.507138 16.57135,-5.659338 2.77884,-0.271106 5.42212,-0.271106 9.55649,0 15.8597,3.388825 5.59156,3.016054 6.20155,7.150421 0.20333,1.423306 0.20333,3.049942 z"/>
<path class="title" fill-opacity="0" stroke="#FFF" stroke-width="1.5"
d="m 826.02356,41.432442 q 0,3.185496 -0.77943,7.692633 -1.35553,7.997627 -5.96433,13.351971 -5.96434,6.913203 -15.89359,6.913203 -9.01428,0 -16.30025,-5.761003 -7.69263,-6.099885 -7.69263,-14.639724 0,-6.709874 5.761,-12.741982 6.54043,-6.845427 17.0119,-8.167069 3.35494,-0.406659 7.76041,-0.406659 8.81094,0 12.64032,3.592155 3.4566,3.253272 3.4566,10.166475 z m -5.82878,4.913796 q 0,-2.609395 -4.3377,-4.100478 -3.93103,-1.321642 -10.0987,-1.321642 -6.77765,0 -13.18253,3.727708 -6.0321,3.524378 -6.0321,6.675985 0,2.168848 3.86326,3.626043 3.86326,1.457195 9.38704,1.457195 6.98098,0 13.69086,-3.28716 6.70987,-3.287161 6.70987,-6.777651 z"/>
<path class="title" fill-opacity="0" stroke="#FFF" stroke-width="1.5"
d="m 909.59198,40.991895 q 0,9.793704 -12.30143,19.384079 l 9.25149,1.457195 q 0.71165,0.948871 1.93163,2.982166 -2.64328,-0.135553 -9.86148,-0.135553 -6.67599,0 -14.50417,0.135553 2.47384,-2.880501 5.25268,-9.48871 3.01605,-7.184309 3.01605,-11.284788 0,-3.456601 -2.37218,-3.456601 -3.86326,0 -8.23484,6.506544 -3.55827,5.286567 -5.761,11.962552 0,6.743762 0.88109,8.472063 1.38942,0.542212 4.6088,1.253865 -0.37277,0.643877 -1.32164,3.321049 l -18.4691,-4.236031 q 3.25328,-6.370992 3.25328,-16.300249 0,-4.507137 -0.16945,-5.693226 -0.5761,-4.100478 -2.81272,-4.100478 -0.84721,0 -2.20274,0.677765 -5.62545,2.812724 -8.20095,12.9792 0.0678,3.219383 3.11772,12.233658 -7.31987,-3.354937 -15.89359,-3.354937 -5.59157,0 -7.69264,1.829966 l 0.13556,-7.862074 q 1.08442,-0.406659 2.64328,-0.406659 2.57551,0 5.04935,1.118312 -2.84661,-6.845427 -5.11713,-23.687887 -0.33888,-2.270513 -2.5755,-2.677172 -2.06719,-0.101665 -4.10048,-0.237218 -1.25387,-0.169441 -1.25387,-4.134366 l 0.71166,0 q 3.86326,0 27.17837,-1.253866 -3.59215,7.319863 -3.59215,16.368025 0,1.965519 0.20333,3.321049 4.0327,-13.284194 15.41915,-20.400727 2.98217,-1.863854 5.1849,-1.863854 6.33711,0 6.33711,14.165289 0,4.168255 -0.44055,7.489303 3.21938,-5.523784 7.15042,-9.454821 6.81154,-6.709874 14.09751,-6.709874 4.94769,0 8.20096,3.117719 3.25327,3.083831 3.25327,7.963739 z"/>
</svg>
</div>
</body>
</html>
更多参考：
SVG 系列教程列表
SVG动画入门
SVG动画入门（二）
SVG技术入门：线条动画实现原理
如何使用CSS来修改SVG原点和制作SVG动画
纯CSS实现帅气的SVG路径描边动画效果
SVG矢量绘图 path路径详解（基本画法）
SVG矢量绘图 path路径详解（贝塞尔曲线及平滑）
Web流程图绘制使用raphael
相关推荐
总结起来，"html5 svg线条动态绘制文字轮廓边框动画"涉及的技术主要包括：HTML5的SVG元素和属性、CSS3的动画控制属性以及JavaScript的图形处理库。通过掌握这些技术，开发者可以创建出富有创意和吸引力的网页动态...
这个压缩包中的内容是一个利用HTML5 SVG技术实现的iPhone边框动态绘制动画效果。 首先，我们来详细解释SVG。SVG是一种基于XML的图像格式，它允许开发者在网页上创建清晰、高质量的图形，无论放大多少倍都不会失真。...
SVG动态绘制轮廓线条动画插件则是利用JavaScript（JS）和SVG的结合，为网页创造出吸引人的视觉效果。JavaScript是一种广泛使用的客户端脚本语言，它能够与HTML和CSS紧密协作，为网页添加动态功能。在这种情况下，JS...
walkway是一款非常简单的HTML5 SVG动态绘制轮廓线条动画插件。它支持SVG的path，line 和 polyline元素。walkway使用起来简单方便，可以制作出非常酷的SVG线条动态绘制效果。
【标题】中的“基于css3+svg实现的文字轮廓边框线条动画特效源码”表明了这是一个前端开发资源，主要利用CSS3和SVG技术来创建文字的动态边框效果。CSS3是层叠样式表的第三版，引入了许多新特性，如动画、过渡和新的...
HTML5 SVG动态绘制轮廓线条动画是一个利用HTML5的SVG（Scalable Vector Graphics）技术和JavaScript实现的创新性视觉效果。SVG是一种基于XML的矢量图形标准，它允许开发者在网页上创建可缩放、高质量的图形，且这些...
HTML5 SVG图形轮廓线条绘制动画插件Vivus是一个强大的工具，专为开发者设计，用于在网页中创建引人入胜的SVG动画效果。SVG（Scalable Vector Graphics）是一种基于XML的矢量图像格式，它允许在网页上创建高质量、可...
本示例中的"HTML5 SVG绘制线条箭头稳步上升动画特效"是一个典型的SVG应用，其核心目标是通过SVG元素和CSS3动画来呈现一种箭头持续上升的效果，以模拟如公司业绩增长等场景。这种效果在各种报告或展示中非常常见，...
本项目“HTML5 svg炫酷波浪线条动画插件”是利用SVG的特性，结合JavaScript库TweenMax和jQuery，创造出动态的、视觉效果出众的波浪线条动画。TweenMax是一个强大的JavaScript动画库，提供了丰富的缓动函数和时间控制...
总的来说，"炫酷绚丽的CSS3 SVG文字边框动画特效"展示了现代Web开发中利用CSS3和SVG进行动态图形设计的无限可能性。通过学习和实践这些技术，开发者可以创造出更多吸引用户眼球的网页元素，提升用户体验。在实际项目...
本教程将深入探讨如何利用SVG来实现DIV边框特效，使你的网页元素更具视觉吸引力。 1. **SVG简介** SVG是一种基于XML的矢量图形格式，它允许开发者创建高质量的图形，无论放大多少倍都不会失真。SVG支持动画、样式、...
在本项目中，“html5 svg+css3制作图片边框运动动画效果”就是利用这两者来实现一种交互式的视觉效果。 首先，SVG（Scalable Vector Graphics）是HTML5中用于绘制矢量图形的标记语言。它允许开发者在网页上创建清晰...
HTML5 SVG线条变形动画特效是一种利用SVG（Scalable Vector Graphics）技术和JavaScript实现的动态视觉效果。SVG是一种基于XML的矢量图形标准，它允许在网页上创建清晰、可缩放的图形，而且这些图形可以与JavaScript...
HTML5与SVG动画404页面是现代网页设计中一种创新且吸引用户的解决方案。404页面通常是用户访问不存在网址时遇到的错误页面，而一个活泼有趣的404页面不仅能够减轻用户的挫败感，还能展示网站的独特风格和品牌个性。...
本文将深入探讨“CSS3 SVG文字轮廓边框特效”这一主题，包括CSS3和SVG的基本概念、如何利用它们创建文字轮廓边框特效，以及相关文件“jiaoben7837”的可能内容。 ### CSS3简介 CSS3（层叠样式表第三版）是用于描述...
综上所述，这个HTML5分段式SVG文字动画特效充分利用了SVG的矢量特性，结合HTML5、CSS3和JavaScript，创造出引人注目的动态文字展示，为网页增添互动性和视觉吸引力。开发者可以通过学习这个项目，掌握SVG动画的制作...
在本案例中，“HTML5 SVG绘制轮廓线路径动画特效”将向我们展示如何利用SVG和相关的JavaScript库来实现动态的线条路径动画效果。 首先，SVG的基本结构包括`<svg>`根元素，以及在其内部定义的各种图形元素，如`...
总结起来，这个“html5 svg绘制2020新年快乐主题动画特效”项目充分利用了HTML5的现代特性、SVG的矢量图形优势以及CSS3和JavaScript的动画能力，为用户呈现了一场视觉盛宴。通过学习和理解这个项目，开发者可以提升...
在本案例中，“HTML5分段式SVG文字动画特效”利用了SVG的特性，结合JavaScript技术，实现了对文字的创新呈现方式。 SVG文字动画特效主要涉及到以下几个知识点： 1. **SVG文本元素**：SVG中可以使用`<text>`标签来...