svg

SVG

SVG是一种矢量图片，放大缩小不失真的

复制svg代码直接使用，通过宽高进行修改大小

SVG图标常见的css属性

svg{
    width: 50px;
    fill: none!important; //填充色
    stroke: rgb(228, 20, 38)!important; //边框颜色
    stroke-width: 20px!important; //边框宽度
    stroke-dasharray: 5px; //虚线
    stroke-dashoffset: 2px; //虚线偏移量 
    &:hover{
        animation:  identifier 1s;
    }
}

获取形状长度

给path加上id 然后在控制台打印id.getTotalLength() 可用于绘制svg动画

绘制动画

使用svg实现心跳

 <div class="main">
<svg t="1764211953093" class="icon1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6381" width="200" height="200"><path d="M512 901.746939c-13.583673 0-26.122449-4.179592-37.093878-13.061225-8.881633-7.314286-225.697959-175.020408-312.424489-311.379592C133.746939 532.37551 94.040816 471.24898 94.040816 384.522449c0-144.718367 108.146939-262.269388 240.326531-262.269388 67.395918 0 131.657143 30.82449 177.632653 84.636735 45.453061-54.334694 109.191837-84.636735 177.110204-84.636735 132.702041 0 240.326531 117.55102 240.326531 262.269388 0 85.159184-37.093878 143.673469-67.395919 191.216327l-1.044898 1.567346c-86.726531 136.359184-303.542857 304.587755-312.424489 311.379592-10.44898 8.359184-22.987755 13.061224-36.571429 13.061225z" p-id="6382"></path></svg>
</div>

.main{
    transform-style: preserve-3d;
    perspective: 500px;
}
.icon1{
    fill: red;

    animation: svgmove1 2s linear alternate infinite;
}
@keyframes svgmove1{
    0%{
       transform: translateZ(0px) scale(0.8);
    }
    100%{
        transform: translateZ(10px) scale(1.1);
    }
}