svg练习题——抽风路径、高斯模糊、仪表盘、个性签名、loading加载

ゝ一纸荒年。 2022-05-12 12:40 165阅读 0赞

1. 使用svg实现抽风路径

<style>
            path{
                animation: move 1s linear alternate infinite;
                stroke:brown;
                stroke-width:5px;
                stroke-dashoffset: 0px;
                stroke-dasharray: 200px;
            }
            @keyframes move{
                from{
                    stroke-dashoffset: 0px;
                }
                to{
                    stroke-dashoffset: 400px;
                }
            }
        </style>

<body>
        <svg width=200 height=200 style="border:2px solid black;">
            <path d="M 0 100 h 200" ></path>
        </svg>
    </body>

结果：

![70][]                                       ![70 1][]

2. 使用svg实现高斯模糊

<svg width=200 height=200 style="border:1px solid black;">
           <defs>
               <filter id="Gaussian_Blur">
                 <feGaussianBlur in="SourceGraphic" stdDeviation="5"></feGaussianBlur>
               </filter>
           </defs>
           <rect x=0 y=0 width=150 height=150 style="filter:url(#Gaussian_Blur)"></rect>
        </svg>
        <img src="./0.jpg" alt="" style="width:200px;height:200px;filter:url(#Gaussian_Blur)">

![70 2][]

3. 用svg写一个仪表盘

<style>
            svg{
                border:1px solid black;
            }
         #path1{
             fill:none;
             stroke:#f3f3f3;
             stroke-width: 4;
         }
         #path2{
             fill: none;
             stroke: brown;
             stroke-width: 4;
             stroke-dasharray: 1000px;
             stroke-dashoffset: 1000px;
             transition: all 1s linear;
         }
        </style>
    
    <body>
        <input type="text" placeholder="请输入0~100的值">
        <input type="text" style="width:40px;">%
        <p></p>
        <svg width=300 height=300>
            <path id="path1" d="M 100 250 A 100 100 0 1 1 200 250 "></path>
            <path id="path2" d="M 100 250 A 100 100 0 1 1 200 250 "></path>
        </svg>
    
        <script>
         var input = document.getElementsByTagName('input')[0];
         var input2 = document.getElementsByTagName('input')[1];
         var totalLength = path1.getTotalLength();
         console.log(totalLength);
         input.onblur = function(){
             var value = this.value*totalLength/100;
             var proportion = value/totalLength*100;
             path2.style.strokeDashoffset = 1000 - value + 'px';
             console.log(proportion);
             input2.value = proportion.toFixed(2); 
         }
        </script>
    </body>

![70 3][]

4. 个性签名

工具：在线编辑器获取svg路径，[https://editor.method.ac/][https_editor.method.ac]

在工具中，将画好的图片导出：

![70 4][]

<style>
            svg{
                border:1px solid black;
            }
            @keyframes show{
                to{
                    stroke-dashoffset: 0;
                }
            }
            @-webkit-keyframes show{
                to{
                    stroke-dashoffset: 0;
                }
            }
            path{
                fill:none;
                stroke: red;
                stroke-width: 3;
                stroke-linecap: round;
            }
        </style>
    
    </head>
    
    <body>
        
        <svg width=600 height=350 xmlns= "http://www.w3.org/2000/svg">
    <g>
            <title>Layer 1</title>
            <path d="m81.5,63c0,0 1,0 1,1c0,1 0,3 0,4c0,1 -0.160179,3.012909 0,4c0.506538,3.121445 1,5 1,7c0,2 0,4 0,5c0,1 0,6 0,7c0,1 -1.458801,3.693436 -2,5c-0.765366,1.847755 0,4 0,6c0,1 -0.486259,2.823746 -1,5c-0.229752,0.973251 -1,3 -1,4c0,1 -0.458801,1.693436 -1,3c-0.382683,0.923882 -0.292892,2.292892 -1,3c-1.414215,1.414215 -0.458801,2.693436 -1,4c-0.765366,1.847755 -0.617317,2.076118 -1,3c-0.541199,1.306564 -1.617317,2.076118 -2,3c-0.541199,1.306564 -2.458801,1.693436 -3,3c-0.765366,1.847763 -1.458801,1.693436 -2,3c-0.382683,0.923874 -0.292892,2.292892 -1,3c-0.707108,0.707108 -3.541195,1.693436 -3,3c0.765366,1.847763 3,0 4,0c2,0 4,0 6,0c1,0 3,0 6,0c1,0 3,0 4,0c2,0 4,0 5,0c1,0 3.053505,0.459503 5,0c2.176254,-0.513748 4,-1 7,-1c2,0 5.038734,0.480545 8,0c3.121445,-0.506546 6,-1 8,-2c2,-1 5.026749,-1.770248 6,-2c4.352501,-1.027481 6,-2 8,-3c2,-1 3,-2 4,-2c2,0 3.585785,0.414215 5,-1c0.707108,-0.707108 1.025818,-0.679634 3,-1c3.121445,-0.506538 3.823746,-1.486259 6,-2c0.973251,-0.229752 2,0 3,0c1,0 2,-1 3,-1l2,0" id="svg_1" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="none"/>
            <path d="m49.5,186c-1,0 0,0 1,0c1,0 3,0 5,0c3,0 7,0 12,0c7,0 13,0 17,0c5,0 13,0 15,0c5,0 7,0 10,0c2,0 3,0 5,0c2,0 4,0 8,0c2,0 5,0 7,0c2,0 4,0 8,0c1,0 3,0 4,0c1,0 3,0 5,-1c2,-1 2.549149,-1.95517 6,-3c0.957092,-0.28978 3.012909,0.160187 4,0c3.121445,-0.506546 5.076126,-0.61731 6,-1c1.306564,-0.541199 2,-1 4,-1l1,0l1,0l1,0" id="svg_2" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="none"/>
            <path d="m108.5,66c0,1 -0.493462,2.878555 -1,6c-0.800911,4.93544 0,9 0,14c0,4 0,10 0,15c0,6 0.672615,10.708473 3,17c1.430496,3.866997 1,9 1,13c0,4 0,8 0,13c0,7 0,11 0,15c0,3 0,6 0,11c0,4 0,8 0,12c0,2 -2,7 -2,10c0,2 -1,5 -1,7c0,2 0,4 0,5c0,2 0,4 0,6c0,2 0,5 0,7c0,1 0,3 0,5c0,2 0,3 0,5c0,3 0,4 0,6c0,2 0,4 -1,7c-1,3 -1,7 -1,9c0,4 -1.486259,5.823746 -2,8c-0.229752,0.973236 0,4 0,5c0,2 0,4 0,6c0,1 0,3 0,5c0,1 0,2 0,4c0,1 0,3 0,4c0,1 0,3 0,4c0,2 0,3 0,4c0,1 -0.95517,2.549164 -2,6c-0.289787,0.957092 0,3 0,4c0,1 -1,2 -1,3c0,2 -1,3 -1,4c0,2 -1,3 -1,4c0,1 0,3 0,4c0,1 0,2 0,3l0,1l1,1" id="svg_3" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="none"/>
            <path d="m90.5,213c0,3 0.814133,5.354584 -3,13c-5.82048,11.66713 -12,18 -17,24c-5,6 -9.34457,12.742828 -13,18c-3.328789,4.787384 -4.144295,7.934143 -5,10c-1.210152,2.92157 -3.541195,3.693451 -3,5c0.382683,0.923889 2.824429,0.9021 4,-1c0.52573,-0.850647 5.175716,-3.607025 10,-6c5.22364,-2.591064 10.065269,-5.903778 16,-10c7.079704,-4.886505 10.70546,-6.346191 13,-8c1.813995,-1.307465 5.012909,-1.839813 6,-2c3.121445,-0.506546 5.186005,-3.692551 7,-5c1.14727,-0.826904 2.236649,-0.05629 4,-1c3.178925,-1.701309 2.91761,-3.386871 4,-6c0.765366,-1.847763 1.292892,-2.292892 2,-3c0.707108,-0.707108 1.173096,-1.852737 2,-3c1.307449,-1.813995 1.770248,-2.973251 2,-2c0.513741,2.176254 1.54863,2.769928 3,7c1.654816,4.823029 4.746391,9.161194 8,14c2.789948,4.149231 6,11 8,14c2,3 3.49295,6.234009 6,11c1.678558,3.190979 3.851944,6.228363 5,9c0.541199,1.306549 3.458801,2.693451 4,4c0.38269,0.923889 1.292892,4.292908 2,5c0.707108,0.707092 3.823746,-0.486267 6,-1c0.973251,-0.229767 2,0 2,1l1,0l1,0l1,1" id="svg_4" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="none"/>
            <path d="m208.5,112c0,-1 2.974182,-1.139114 8,-2c6.969559,-1.193832 17,-3 26,-3c4,0 16,0 17,0c2,0 3.026764,-0.229752 4,0c2.176239,0.513741 3,1 4,2c1,1 3,2 3,3c0,1 0.160187,2.012909 0,3c-0.506531,3.121445 -2.234253,2.812439 -11,14c-3.083771,3.935776 -8.228851,8.729614 -13,13c-5.268845,4.715851 -11.020508,9.974503 -16,14c-6.955658,5.623062 -13,8 -18,13c-6,6 -9.917603,8.386871 -11,11c-1.148056,2.771637 0.307449,4.186005 -1,6c-0.826904,1.147263 -2.292892,2.292892 -3,3c-0.707108,0.707108 -1.458801,0.693436 -2,2c-0.765366,1.847763 -1,3 0,3c1,0 2,0 4,0c8,0 12,0 16,0c3,0 6.925797,-0.497559 12,-1c2.985397,-0.295609 7,0 8,0c2,0 3.878555,-0.493454 7,-1c1.974182,-0.320358 6,0 8,0c3,0 4.823746,-1.486252 7,-2c1.946503,-0.459503 5.228363,1.148056 8,0c1.306549,-0.541199 2.026764,-0.770248 3,-1c2.176239,-0.513748 4,-2 5,-2l1,0l1,-1l0,1" id="svg_5" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="none"/>
            <path d="m232.5,115c0,0 0.366547,2.022476 0,5c-0.503769,4.092216 -1,9 -1,15c0,5 0.25,15.115326 2,24c1.406921,7.142868 4.231735,12.927673 6,19c1.152771,3.958679 2,10 2,15c0,3 2,7 2,10c0,4 0,11 0,13c0,5 0,8 0,11c0,4 -0.496231,6.907791 -1,11c-0.24437,1.985016 -0.519455,5.038742 -1,8c-0.506546,3.121445 -1,5 -1,6c0,2 0,3 0,5c0,1 0,3 0,4c0,2 0,4 0,6c0,2 0.486252,3.823761 1,6c0.459503,1.946503 0,4 0,5c0,1 0,2 0,4c0,1 0,2 0,3l0,1" id="svg_6" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="none"/>
            <path d="m176.5,308c1,-1 2,-1 3,-1c1,0 3.186005,-0.692535 5,-2c1.147263,-0.826904 4,-1 6,-1c2,0 4,0 7,0c2,0 7,0 12,0c4,0 9.053497,0.540497 11,1c4.352509,1.027496 6.631897,2.713165 10,4c6.605377,2.523682 10,2 13,2c2,0 5,0 8,0c3,0 4,0 6,0c1,0 3,0 4,0c2,0 5,0 6,0c3,0 5.186005,0.307465 7,-1c1.147278,-0.826904 2,-1 3,-1c1,0 2.026764,0.229767 3,0c2.176239,-0.513733 3.823761,-1.486267 6,-2c0.973236,-0.229767 2,0 3,0c2,0 2.823761,-0.486267 5,-1c0.973236,-0.229767 1.693451,-0.458801 3,-1c1.847748,-0.765381 4,0 5,-1c1,-1 2,-3 3,-4c1,-1 2,-3 3,-3l0,-1" id="svg_7" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="none"/>
            <path d="m278.5,260c1,0 2,1 4,2c2,1 4,2 6,4c2,2 3.149353,2.474274 4,3c1.9021,1.175568 1,3 2,5l1,1l0,1l1,0" id="svg_8" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="none"/>
            <path d="m351.5,147c2,0 3,0 5,0c3,0 7,0 11,0c2,0 5,0 6,0c2,0 4,0 8,0c3,0 6,0 8,0c4,0 6,0 8,0c1,0 3,0 5,1c2,1 3,1 4,1c1,0 2.076111,0.38269 3,0c1.306549,-0.541199 2.292908,-1.292892 3,-2c0.707092,-0.707108 3,0 5,0l1,-1l1,0" id="svg_9" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="none"/>
            <path d="m389.5,76c0,1 0.307465,2.186005 -1,4c-0.826904,1.14727 -1,4 -1,6c0,4 0,6 0,10c0,2 0,4 0,6c0,2 0,6 0,7c0,4 0,7 0,10c0,4 -0.366547,8.022476 0,11c0.503784,4.092209 0.469269,7.304489 2,11c0.541199,1.306564 2,6 2,10c0,3 -0.733093,7.044952 0,13c0.503784,4.092209 2,8 2,12c0,4 0,10 0,14c0,5 0.497559,9.925797 1,15c0.492676,4.975662 -0.689758,9.034073 0,16c0.502441,5.074203 2,8 2,12c0,5 -0.68927,9.080246 0,12c0.513733,2.176254 1,5 1,6c0,4 0,8 0,11c0,2 -0.144287,3.934143 -1,6c-1.210144,2.92157 -1.802917,7.009735 -2,9c-0.502441,5.074219 -1,6 -1,9c0,1 0,3 0,5c0,2 0,3 0,4l0,1l0,1" id="svg_10" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="none"/>
            <path d="m380.5,165c-1,0 -1.051331,2.153946 -2,5c-1.581146,4.743423 -4.095428,8.977341 -5,13c-1.118652,4.974792 -2.847229,9.041321 -4,13c-0.884125,3.036163 -0.851959,7.228363 -2,10c-1.082397,2.613129 -2.917603,5.386871 -4,8c-1.148041,2.771637 -0.345184,7.176971 -2,12c-1.451385,4.230072 -3.917603,4.386871 -5,7c-0.765381,1.847763 -1.692535,4.186005 -3,6c-0.826904,1.147263 -1,2 0,2c1,0 2.186005,0.307449 4,-1c1.147278,-0.826904 3.881531,-3.190277 7,-5c3.867981,-2.24469 7.232727,-2.733246 13,-8c4.177155,-3.814636 6.418854,-4.418854 8,-6c1.581146,-1.581146 3.528137,-4.118332 4,-5c1.701294,-3.178925 5.692535,-7.186005 7,-9c1.653809,-2.29454 2.917603,-2.386871 4,-5c0.38269,-0.923874 -0.414215,-2.585785 1,-4c0.707092,-0.707108 2,-1 3,-3c1,-2 1.458801,-2.693436 2,-4c0.38269,-0.923874 0.61731,-2.076126 1,-3c0.541199,-1.306564 1.61731,-1.076126 2,-2c0.541199,-1.306564 2.076111,-1.61731 3,-2c2.613129,-1.082397 3,-2 4,-3c1,-1 2.076111,-0.61731 3,-1c1.306549,-0.541199 2,-2 3,-2l2,-1" id="svg_11" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="none"/>
            <path d="m458.5,83c0,1 0.917603,1.386871 2,4c1.913422,4.6194 0.469269,9.304482 2,13c0.541199,1.306564 1.486267,2.823746 2,5c0.229767,0.973251 1.458801,1.693436 2,3c0.765381,1.847755 1,3 1,4c0,2 1,4 2,5l0,1l0,1l1,1" id="svg_12" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="none"/>
            <path d="m436.5,147c5,-3 6.076904,-2.731445 10,-4c5.123962,-1.656845 9,-4 14,-4c5,0 10.946716,-0.498734 18,-1c3.989929,-0.283554 7,0 10,0c2,0 3.026764,-0.229752 4,0c2.176239,0.513748 3.292908,0.707108 4,0c0.707092,-0.707108 1,1 2,1c1,0 3,0 4,0c1,0 2,1 3,1l0,2" id="svg_13" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="none"/>
            <path d="m433.5,207c1,0 3,0 5,0c6,0 16,0 24,0c7,0 12,0 16,0c2,0 4,0 5,0c2,0 4.07843,0.210144 7,-1c2.065857,-0.855713 3.053497,-0.540497 5,-1c2.176239,-0.513748 4,-2 5,-2c3,0 4.823761,-1.486252 7,-2c2.919739,-0.689255 4,-1 4,0l-1,1" id="svg_14" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="none"/>
            <path d="m469.5,148c-1,0 -1,1 -1,3c0,6 -1,14 -1,20c0,4 0,9 0,14c0,4 0,8 0,10c0,3 0,7 0,9c0,4 0,9 0,14c0,3 0,6 0,8c0,3 0,5 0,7c0,2 0,4 0,6c0,2 0,5 0,7c0,3 -1,4 -1,6c0,2 0,3 0,5c0,2 0,3 0,4c0,1 0,2 0,3c0,1 -0.765381,2.152252 0,4c0.541199,1.306549 2,2 2,3c0,1 0,2 0,3l0,1" id="svg_15" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="none"/>
            <path d="m412.5,298c1,0 3,-1 5,-2c2,-1 4.878571,-2.493469 8,-3c3.948364,-0.640717 9,0 13,0c6,0 13,0 19,0c5,0 8,0 12,0c4,0 9.041321,-0.152771 13,1c3.036163,0.884125 7,1 10,1c4,0 8.907776,-0.496216 13,-1c2.977509,-0.366547 5.076111,0.38269 6,0c1.30658,-0.541199 2,-1 3,-1c2,0 3,-1 5,-1c2,0 3,-1 4,-1c1,0 2,0 3,0l1,0l1,-1" id="svg_16" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="none"/>
    </g>
        </svg>
    
        <script>
            var pathList =  document.getElementsByTagName('path');
            var len = pathList.length;
            var delay = 0;
            for(var i = 0; i< len; i++){
                var curLen = Math.round(pathList[i].getTotalLength());
                
                pathList[i].style.strokeDasharray = curLen;
                pathList[i].style.strokeDashoffset = curLen;
                console.log('show '+ curLen+'ms linear '+delay+'ms forwards');
                pathList[i].style.webkitAnimation = 'show ' + curLen + 'ms linear '+ delay + 'ms forwards';
                delay += curLen;
            }
        </script>

注意：JavaScript中的代码，每个path标签的时间都是自己的长度值，同时每个path标签的延迟时间是前面path标签的时间和。

注意：webkitAnimation的值：

![70 5][]

5. loading加载

<style>
            svg{
                border: 1px solid black;
            }
            circle,path {
                fill: none;
                stroke: #ff5700;
                stroke-width: 10px;
                stroke-linecap: round;
            }
            circle{
                stroke: rgba(255, 150, 0,0.5);
            }
        </style>
    </head>
    <body>
        <svg width=100 height=100>
            <circle cx=50 cy=50 r=40></circle>
            <path d="M 10 50 A 40 40 0 0 1 50 10">
                <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="0.5s" repeatCount="indefinite"></animateTransform>
            </path>
        </svg>
    </body>

![70 6][]

注意：path标签内的《animateTransform》标签。

[70]: https://img-blog.csdn.net/20180918090621568?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: /images/20220512/40f1bec1a23d422a947e416968334787.png
[70 2]: /images/20220512/6b83ffaceba14ddeaffc3891f133c793.png
[70 3]: /images/20220512/deb75dc4fa5a4466b7bd44bf3ec36664.png
[https_editor.method.ac]: https://editor.method.ac/
[70 4]: /images/20220512/e1ae8ef3946940828bdc8288b7abbaf7.png
[70 5]: /images/20220512/37a9b9edcfc649fb896effca273074cd.png
[70 6]: /images/20220512/b2da6736b00d42f48afdbf15012dcb48.png

发表评论取消回复

表情：

评论列表（有 0 条评论，165人围观）

还没有评论，来说两句吧...

相关阅读

相关 Android 关于Glide的拓展(高斯模糊、加载监听、圆角图片)

1、引用 > 抱歉，之前由于个人疏忽原因误解了。官方自身是不能使用高斯模糊的，引入的库应为如下，将官方的额外扩展了，使其可以支持高斯模糊。 compile 'j

怼烎@/ 2024年02月17日 22:42/ 0 赞/ 73 阅读

相关 Android高斯模糊、高斯平滑（Gaussian Blur）【2】

Android高斯模糊、高斯平滑（Gaussian Blur）【2】 Android上的高斯模糊效果实现，策略不唯一，在github上有一个开源的实现算法： [https

超、凢脫俗/ 2024年02月17日 16:31/ 0 赞/ 78 阅读

相关 Android高斯模糊、高斯平滑（Gaussian Blur）【1】

Android高斯模糊、高斯平滑（Gaussian Blur）【1】 Android高斯模糊、高斯平滑（Gaussian Blur），图形图像处理的一种效果，经过高斯

小鱼儿/ 2024年02月17日 16:30/ 0 赞/ 81 阅读

相关高斯模糊

/ 获取 View 的高斯模糊 Bitmap / fun gaussianBlur(v: View): Bitma

柔光的暖阳◎/ 2022年12月29日 11:28/ 0 赞/ 181 阅读

相关小程序canvas高斯模糊

//以下是小程序html代码 <canvas canvas-id="canvasIn" class="canvas"></canvas> <canv

缺乏、安全感/ 2022年09月08日 12:54/ 0 赞/ 289 阅读

相关高斯模糊的算法

作者：阮一峰日期：2012年11月14

分手后的思念是犯贱/ 2022年07月14日 11:39/ 0 赞/ 239 阅读

相关 Android背景模糊话模糊、高斯模糊（FastBlur）

一、添加FastBlur工具类： / Created by Lee on 2018/4/26. / import andr

朱雀/ 2022年05月26日 06:45/ 0 赞/ 1450 阅读

相关高斯模糊

什么是高斯模糊高斯模糊（英语：Gaussian Blur），也叫高斯平滑，是在Adobe Photoshop、GIMP以及Paint.NET等图像处理软件中广泛使用的处

深藏阁楼爱情的钟/ 2022年05月20日 05:00/ 0 赞/ 273 阅读

相关 svg练习题——抽风路径、高斯模糊、仪表盘、个性签名、loading加载

1. 使用svg实现抽风路径 <style> path{ animation: move 1s linear

ゝ一纸荒年。/ 2022年05月12日 12:40/ 0 赞/ 166 阅读

相关 backdrop-filter高斯模糊

backdrop-filter是在Filter Level2提出来的。这是一个实验技术，其取值和filter Level1中filter属性的属性值一样，包括： blur()

旧城等待，/ 2022年04月04日 09:44/ 0 赞/ 346 阅读