SVG互动排版公众号文章『描边轮廓动画绘制』模板代码

最新推荐文章于 2021-07-19 14:10:34 发布

懂点君

最新推荐文章于 2021-07-19 14:10:34 发布

阅读量242

点赞数

分类专栏：模板代码 | SVG公众号互动排版文章标签： svg html html5 css3

转载请联系微信号：dong_dian_jun

本文链接：https://blog.csdn.net/h5course/article/details/118463842

版权

模板代码 | SVG公众号互动排版专栏收录该内容

54 篇文章 22 订阅 ¥99.90 ¥299.90

订阅专栏

超级会员免费看

本文介绍了SVG中利用stroke-dasharray和stroke-dashoffset属性实现轮廓动画的方法。通过设置描边的虚线模式和偏移量，可以创建动态显示的轮廓效果。在动画过程中，初始时stroke-dashoffset设为轮廓总长度，随着值的减少，线条逐渐显现。

摘要由CSDN通过智能技术生成

模板代码


<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 370" stroke-dasharray="100000, 100000" stroke-dashoffset="100000" style="display: inline-block;width: 100%;weixin: dongdianjun;pointer-events: none;" data-author="公众号：懂点君">
    <!-- 背景色 -->
    <g>
        <rect width="520" height="370" fill="#2B5843" data-author="公众号：懂点君"></rect>
    </g>
    <!-- 文字 -->
    <g>
        <animate attributeType="CSS" attributeName="stroke-dashoffset" begin="click" values="100000;0" dur="1200s" fill="freez

了解本专栏