<!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 webservice 总结（学会读别人的webservice并且通过代理模式访问）

    公司做的系统之间的交互用到了webservice做交互,现在对webservice做一个总结. 1.配置已有的webservice webservice主要包括 xml/json:作为传输数据的格式 ...

  2. wangEditor——轻量级web富文本框

    提示:最新版wangEditor请参见  http://www.wangeditor.com/  和   https://github.com/wangfupeng1988/wangEditor 交流 ...

  3. 【原创】.NET读写Excel工具Spire.Xls使用(4)对数据操作与控制

                  本博客所有文章分类的总目录:http://www.cnblogs.com/asxinyu/p/4288836.html .NET读写Excel工具Spire.Xls使用文章 ...

  4. Java多线程系列--“JUC集合”03之 CopyOnWriteArraySet

    概要 本章是JUC系列中的CopyOnWriteArraySet篇.接下来,会先对CopyOnWriteArraySet进行基本介绍,然后再说明它的原理,接着通过代码去分析,最后通过示例更进一步的了解 ...

  5. WebStorm 9 配置 Live Edit 功能与浏览器实现同步

    1. 打开Chrome浏览器,点击右上角的“自定义及控制”按钮,选择“更多工具”-->”扩展程序”,打开“扩展程序”页面. 其实以上步骤可以简化为:用Chrome打开chrome://exten ...

  6. Codrops 优秀教程：CSS 3D Transforms 实现书本效果

    这个使用  CSS 3D Transforms 实现创意书本效果的来自 Codrops 网站.你可以看到两种类型的书设计:精装书和平装书.这两个效果都可以很容易地使用 CSS 修改.赶紧体验一下吧. ...

  7. QQ JS_SDk相关功能接口

    一.实现QQ登录功能 <!DOCTYPE html><html lang="zh-cn">   <head>      <meta htt ...

  8. 使用ajax提交form表单，包括ajax文件上传

    前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){ ... },"json"); 又或者是这样的aja ...

  9. 在SQL Server里为什么我们需要更新锁

    今天我想讲解一个特别的问题,在我每次讲解SQL Server里的锁和阻塞(Locking & Blocking)都会碰到的问题:在SQL Server里,为什么我们需要更新锁?在我们讲解具体需 ...

  10. MVC之前的那点事儿系列（6）：动态注册HttpModule

    文章内容 通过前面的章节,我们知道HttpApplication在初始化的时候会初始化所有配置文件里注册的HttpModules,那么有一个疑问,能否初始化之前动态加载HttpModule,而不是只从 ...