svg-filter高斯模糊

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .gaosi{
            filter:url("#f1");
        }
    </style>
</head>
<body>
            <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"
                viewBox="0,0,500,500" width="500" height="500" aria-labelledby="title desc">
                    <title id="title"></title>
                    <desc id="desc"></desc>
                <defs>
                    <filter id='f1'>
                        <feGaussianBlur in = "SourceGraphic" stdDeviation="15" id="fe"/>
                    </filter>
                </defs>    
                    <image width = "500" height = "500" class = "img gaosi" xlink:href="img/merry-christmas.jpg"></image>
            </svg>
            <button id="btn">开关</button>
            <script>
                var btn = document.querySelector('#btn');
                var img = document.querySelector('.img');
                var fe = document.querySelector('#fe');
                var x = 15;
//                btn.onclick = function(argument) {
//                    img.classList.toggle('gaosi')   ;
//                }
                setInterval(function(){
                    x--;
                    fe.getAttribute('stdDeviation',x);
                    fe.setAttribute('stdDeviation',x);
                },100)
            </script>
</body>
</html>

相关阅读:
Java内部类详解
浅谈Java中的深拷贝和浅拷贝（转载）
native为本地方法
Java NIO：NIO概述
Java NIO：浅析I/O模型
Hash表
浅谈Java中的hashcode方法
spring boot学习（转）
Spring Boot修改内置Tomcat端口号
K8S

原文地址：https://www.cnblogs.com/jessical626/p/5978625.html