svg路径动画制作教程(目前只适应移动端)

svg路径动画制作教程(目前只适应移动端)


详细教程看https://www.w3cplus.com/svg/svg-animation-guide.html

svg自适应写法

svg自适应写法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div style="width:30%; height:3.6rem;">
     <svg width="100%" height="100%" viewBox="0,0,40,30" style="border:1px solid #cd0000;">
         <rect x="0" y="0" width="40" height="30" fill="#cd0000"/>
    </svg>
    </div>
    <script src="/moban/js/jquery.min.js"></script>
    <script type="text/javascript">
   (function(doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        /*如果屏幕尺寸发生了变化就会立即更新*/
        recalc = function() {
            /*     var clientWidth = docEl.clientWidth;*/
            var clientWidth = parseInt($('body').width());
            if (!clientWidth) return;
            docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
        };
    if (!doc.addEventListener) return;
    /*如果窗口改变了大小 手机旋转了都会重新修改font-size属性*/
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);    	
    $(function() {
        $('.dds').on('click', function() {
            $(this).attr('fill', 'green');
        })
    })
 

    </script>
</body>

</html>

svg描边路径动画

svg描边路径动画

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>

        html,body{
            width:100%; height:100%;
        }
        /*1000是线条(path)的长度  stroke-dasharray和stroke-dashoffset的值要一样 stroke-dasharray的值就是每段的长度    stroke-dashoffset每段的偏移值 */
     path {
            stroke-dasharray: 1000;
            stroke-dashoffset: 1000;
            -webkit-animation: dash 1s linear infinite;
        }

        @-webkit-keyframes dash {
            to {
                stroke-dashoffset: 0;
            }
        }
        .svgdonghua2{
            display: none;
        }
    </style>
</head>
<body>


<div style="width:300px; height:300px;" class="ds">
    <svg class="svgdonghua svgdonghua1" version="1.1" id="huaban1" xmlns="http://www.w3.org/2000/svg" width="31rem" height="31rem"  viewBox="0 0 167 167" preserveAspectRatio="xMaxYMax meet" >
        <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M1.2,1.011c1.885-0.986,6.254-0.182,8.395-0.182
	c12.128,0,24.256,0,36.383,0c13.245,0,26.49,0,39.735,0c3.012,0,5.487,0.271,8.421,1.165c6.376,1.941,12.309,2.474,18.951,2.665
	c5.468,0.157,10.894,0.001,16.298-0.724c4.636-0.622,9.396-0.374,14.094-0.374c6.421,0,12.851-0.041,19.267,0.002
	c0.196,24.462,0.439,48.991,0.21,73.474c-0.063,6.69-0.391,13.389-0.367,20.103c0.031,9.434,1.144,18.918-1.417,28.075
	c-0.944,3.375-0.21,4.532,0.259,7.825c0.572,4.013,0.765,7.719,0.975,11.732c0.186,3.555,3.401,8.736,0.915,12.164
	c-2.479,3.416-8.678,5.368-12.396,6.45c-6.105,1.777-12.556,1.496-18.925,1.563c-6.96,0.074-13.882,0.559-20.823,0.542
	c-29.13-0.067-58.268,0.183-87.387,0.183c-4.539,0-9.118,0.193-13.652,0c-1.883-0.08-5.043-0.18-6.566-1.272
	c-1.454-1.043-1.981-4.339-2.145-6.046c-0.266-2.767,0.061-5.548-0.264-8.322c-0.352-3.009-0.733-6.372-0.124-9.383
	c0.97-4.795,1.534-9.665,2.355-14.517c0.391-2.309,0.553-4.632,0.898-6.944c0.434-2.9,1.448-5.635,1.842-8.542
	c1.016-7.5,0.352-15.428,0.352-22.993c0-12.143,0.861-24.604-1.147-36.562C3.297,38.959,2.699,26.44,2.476,14.118
	C2.394,9.625,1.047,5.583,1.018,1.193"/>
</svg>
</div>


ps:svg设置宽度并不能修改里面的宽度 viewBox 167 167是svg原本的宽度和高度 单位是像素 不能去改他 改width和height只能等比例缩放 不能拉伸

更多svg自适应的理解查看 http://www.zhangxinxu.com/wordpress/2014/08/svg-viewport-viewbox-preserveaspectratio/