<!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 environment variables and their functionality

    Explanations of Functionalities: 1. PATH env variable It is used to search the command directory whe ...

  2. ThinkPHP5 隐藏接口里面的index.php

    隐藏index.php 官方介绍是这样的:http://www.kancloud.cn/thinkphp/thinkphp5_quickstart/145250 可以去掉URL地址里面的入口文件ind ...

  3. SSIS的CheckPoint用法

    在SSIS的Package Property中有CheckPoints的属性目录,CheckPoint是SSIS的Failover Feature.通过简单的配置CheckPoint,能够在Packa ...

  4. 新浪微博SDK开发（1）：总述

    花了几天时间,消耗了九牛六虎之力,新浪微博大部分API已经封装,但有部分API实在太难封装. 说起这封装,我必须严重地.从人品和技术层面鄙视一下新浪的程序员,实在太菜了.估计菜鸟都被大企业吸收了,菜到 ...

  5. hibernate（四）ID生成策略

    一.ID生成策略配置 1.ID生成方式在xml中配置方式: <?xml version="1.0"?> <!DOCTYPE hibernate-mapping P ...

  6. JAVA设计模式《三》

    上一篇为大家介绍了一下关于模板方法模式的实现,后来我发现里面有一点小瑕疵,本篇重新为大家介绍一下关于模板方法模式的实现.另外为大家分享一下关于策略模式的实现. 一.模板方法模式: 对于上一篇为大家介绍 ...

  7. 手机端web学习基础--from慕课网

    web知识零零散散的知道一些,但总感觉不够系统,遇到问题不知道如何解决,因此特此来系统的学习一下web前端的知识.从慕课网的web基础看起.下面学习http://www.imooc.com/learn ...

  8. testing - 测试基本使用接口

    testing - 测试基本使用接口 当你写完一个函数,结构体,main之后,你下一步需要的就是测试了.testing包提供了很简单易用的测试包. 写一个基本的测试用例 测试文件的文件名需要以_tes ...

  9. HTML语义化：HTML5新标签——template

    一.前言 当我们使用String-base的模板引擎(如Handlebars.js等)时,要么就通过外部文件存放模板文本,需要时再通过XHR或script标签加载进来:要么通过<script t ...

  10. ES6笔记（4）-- Symbol类型

    系列文章 -- ES6笔记系列 Symbol是什么?中文意思是标志.记号,顾名思义,它可以用了做记号. 是的,它是一种标记的方法,被ES6引入作为一种新的数据类型,表示独一无二的值. 由此,JS的数据 ...