学习svg 基本使用

一.实例展示

1.鼠标移动

效果:

 2.圆圈效果

css代码：

.item {
    cursor: pointer;
    transition: all .3s ease;

    .img_box {
        border-radius: 50%;
        position: relative;
        width: 198px;
        height: 198px;

        margin: 0 auto;

        img {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            width: 178px;
            height: 178px;
        }

        .svg_box {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            width: 198px; //图片宽度+边框宽度
            height: 198px; //图片高度+边框高度

            circle {
                stroke-dasharray: 628;
                /*虚线220间隔大于等于虚线220 100*2*3.14 = 628*/
                stroke-dashoffset: 628;
                /* 向后移看不见 */
                fill: transparent;
                stroke: #cfe2ff;
                stroke-width: 10px;
                cx: 100; //198/2 然后微调
                cy: 100;
                r: calc((100% - 10px) / 2);
                transition: all 0.7s ease;
            }
        }





    }

    &:hover,
    &.current {
        transform: scale(1.1);

        .svg_box {
            circle {
                stroke-dashoffset: 0;

            }
        }
    }
}

html代码：

 


        

            

            
        
        
窗口办理
    

呈现效果:

 

二.编辑器可视化的使用

SvgPathEditorOnline editor to create and manipulate SVG pathshttps://yqnn.github.io/svg-path-editor/

在左上角是path路径代码 ，左下角自动生成对应的数据 方便可视化画各种简单的图像一键生成svg

 并且右上角可以导出svg图片