svg实现文字描边

svg实现文字描边效果

最近有一个h5页面小项目，需要实现文字描边效果，借鉴了张鑫旭的教程，实现了这一效果。

效果戳这里
html

<div class="block">
<svg version="1.1" id="hui" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 157.7 153.1" style="enable-background:new 0 0 157.7 153.1;" xml:space="preserve">
<path class="st30" d="M15.1,108.5c-1.3,0-1.9-0.6-1.9-1.9L8.1,89.8c4.7-0.4,8.4-2.6,10.9-6.4c6-8.1,11.2-16.7,15.5-25.8     c-9,2.6-17,4.7-23.8,6.4c0,4.3-1.1,6.7-3.2,7.1c-1.3,0-1.9-0.9-1.9-2.6L0.3,53.7c3.4-0.9,6.2-2.8,8.4-5.8     c5.2-7.7,10.3-18.4,15.5-32.2c2.1-5.2,3.4-10.1,3.9-14.8l18.7,5.8c1.3,0.4,1.9,1.1,1.9,1.9c0,2.6-2.8,4.1-8.4,4.5     c-9,15.5-18.2,28.8-27.7,39.9L37,51.8c1.3-2.6,2.4-5.4,3.2-8.4c2.6-5.2,4.3-9.9,5.2-14.2l16.7,6.4c1.7,0,2.4,0.6,1.9,1.9     c0,2.6-2.8,3.9-8.4,3.9c-9.9,18.5-21,34.1-33.5,47l33.5-6.4l1.3,2.6c-12.9,6-25.8,11.6-38.6,16.7C18.4,105.7,17.3,108,15.1,108.5z      M10.6,142.6c-1.3,0-2.2-0.6-2.6-1.9l-6.4-17.4c14.2-2.1,34.1-7.1,59.9-14.8l1.3,2.6c-18.5,10.3-34.8,18.5-48.9,24.5     C13,140.6,11.9,143,10.6,142.6z M144.5,66c-18.5-13.3-32.2-30.9-41.2-52.8C92.2,38.5,75.4,58,53.1,71.8l-1.9-2.6     C73.1,46.9,87,23.9,93,0.3l17.4,3.9c1.3,0.4,1.9,1.3,1.9,2.6c-0.4,2.2-2.8,3.4-7.1,3.9c15.9,21,33.3,35,52.1,41.8l-1.3,3.2     C151.4,55.2,147.5,58.7,144.5,66z M57.6,91.7v-4.5h70.8l7.7-10.9L151,87.2c1.3,0.4,1.7,1.1,1.3,1.9c0,1.3-1.7,2.2-5.2,2.6h-40.6     c-10.3,16.7-21.7,30.5-34.1,41.2l55.4-1.3c-3-6.4-8.2-13.5-15.5-21.2l1.9-1.9c22.7,13.7,34.1,25.1,34.1,34.1     c-0.4,6.4-3.2,9.9-8.4,10.3c-2.6,0-4.5-1.7-5.8-5.2c-1.3-4.3-2.8-7.9-4.5-10.9c-10.7,1.7-25.5,4.1-44.4,7.1     c-6.9,0.9-12,1.5-15.5,1.9c0,4.3-1.1,6.6-3.2,7.1c-1.3,0-2.2-0.9-2.6-2.6l-5.8-16.7c5.2-1.3,8.8-3.6,10.9-7.1     c8.6-11.2,15.2-22.7,20-34.8H57.6z M76.3,63.4v-4.5h30.9l7.1-9l12.9,9.7c0.9,0.4,1.3,1.1,1.3,1.9c0,1.3-1.7,1.9-5.2,1.9H76.3z" />
</svg>
</div>

css

.block{
width:150px;
height:150px
}
path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
-webkit-animation: dash 5s linear infinite;
animation: dash 5s linear infinite;
}

@-webkit-keyframes dash {
to {
stroke-dashoffset: 0;
}
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
.st30 {
fill: none;
stroke: #A67C52;
stroke-width: 0.5;
stroke-miterlimit: 10;
}