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

svg-filter高斯模糊的更多相关文章

  1. CSS3魔法堂：CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解

    一.前言    IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性,因此当前仅Webkit内核的浏览器支持CSS3 F ...

  2. CSS3魔法堂：CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解[转]

    一.前言    IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性,因此当前仅Webkit内核的浏览器支持CSS3 F ...

  3. svg基础知识体系建立

    一.简介:SVG 是使用 XML 来描述二维图形和绘图程序的语言. SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使 ...

  4. 有关svg的一些理解

    SVG 是使用XML来描述二维图形和绘图程序的语言. SVG指可伸缩的矢量图形(Scalable Vector Graphics) SVG使用XML格式定义图形 SVG图形在放大或改变尺寸的情况下,图 ...

  5. 推荐8个实现 SVG 动画的 JavaScript 库

    SVG 是一种分辨率无关的图形(矢量图形).这意味着它在任何类型的屏幕都不会遭受任何质量损失.除此之外,你可以让 SVG 灵活现一些动画效果.这篇文章就给大家推荐8个实现 SVG 动画的 JavaSc ...

  6. 走进SVG

    什么是SVG?也许现在很多人都听说过SVG的人比较多,但不一定了解什么是SVG:SVG(Scalable Vector Graphics 一大串看不懂的英文)可伸缩矢量图形,它是用XML格式来定义用于 ...

  7. 带给你灵感：30个超棒的 SVG 动画展示【下篇】

    前端开发人员和设计师一般使用 CSS 来创建 HTML 元素动画.然而,由于 HTML 在创建图案,形状,和其他方面的局限性,它们自然的转向了 SVG,它提供了更多更有趣的能力.借助 SVG,我们有更 ...

  8. Firefox使用svg blur滤镜渲染图片

    很久没来更新博客了,今天正好比较闲,就写一篇手头项目上遇到的一个css问题: .mature .blur { -webkit-filter:blur(25px); -moz-filter:blur(2 ...

  9. CSS grayscale滤镜+SVG使图片变黑白实例页面

    http:/CSS 地址:/www.runoob.com/cssref/css3-pr-filter.html CSS代码: .gray { -webkit-filter: grayscale(%); ...

  10. 10 个非常实用的 SVG 动画操作JavaScript 库

      SVG 通常可以用作跨分辨率视频.这意味着在一块高分屏幕上不会降低图片的锐度.此外,你甚至可以让SVG动起来,通过使用一些javascript类库.下面,我们分享一些javascript类库,这些 ...

随机推荐

  1. java常用命令行指令

    javac 将java源文件编译成class字节码文件 javac HelloWorld.java java (1)运行class文件 java HelloWorld 注意java命令后面不要加.cl ...

  2. 【博客美化】04.自定义地址栏logo

    博客园美化相关文章目录: [博客美化]01.推荐和反对炫酷样式 [博客美化]02.公告栏显示个性化时间 [博客美化]03.分享按钮 [博客美化]04.自定义地址栏logo [博客美化]05.添加Git ...

  3. JSP网站开发基础总结《三》

    经过前两篇的总结,我想大家一定迫不及待的想学习今天的关于jsp与mysql的数据库连接的知识了.既然需要连接mysql数据库,你首先需要保证你的电脑已经安装过mysql数据库,mysql数据库的安装步 ...

  4. AngularJS入门心得3——HTML的左右手指令

    在<AngularJS入门心得1——directive和controller如何通信>我们提到“AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文 ...

  5. nodejs学习笔记三——nodejs使用富文本插件ueditor

    在做自己的nodejs项目的时候遇到需要使用ueditor.原来下载的是ueditor的jsp版本.目录如下  在ueditor.config.js中有配置服务器home路径(这个home路径能找到u ...

  6. H5新特性websocket

    websocket也是html5的新增加内容之一,号称是下一代客户端/服务器异步通信办法,私以为虽然有点吹牛的成分,但是以后说不定能成为异步通信的半壁江山,至于取代ajax,我觉的应该不会. webs ...

  7. 【视频处理】YUV格式说明

    YUV,是一种颜色编码方法,Y表示明亮度(Luminance.Luma),U和V则是色度.浓度(Chrominance.Chroma). YUV,Y`UV,YCbCr,YPbPr等都可以称为YUV,彼 ...

  8. ES6笔记（2）-- let的块级作用域

    系列文章 -- ES6笔记系列 一.函数级作用域 我们都知道,在ES6以前,JS只有函数级作用域,没有块级作用域这个概念 没有块级作用域,有利有弊,利于方便自由,弊于作用域内的变量容易被共享,例如这个 ...

  9. 百度地图API实现地图定位

    1.引用JS: <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0& ...

  10. ASP.NET MVC文章附加有源码下载的文章

    很多一段时间以来,Insus.NET有分享很多有关ASP.NET MVC的文章,每隔一段时间,会把源码以及数据库分享供大家下载. 你可以按时间排序,文章越新,源码以及数据数据也就越新. 你可以从下面的 ...