<!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>
