我正在玩将SVG过滤器应用于
HTML.如果所有内容都是硬编码的,这可以工作,虽然我需要-webkit-filter CSS id for chrome.当尝试使用
javascript动态创建带有过滤器的SVG元素时,它会失败.有谁能解释为什么？
这是我到目前为止：http://jsfiddle.net/H3UX8/1/
第一个图像和文本对在chrome和firefox上模糊,但第二对不是.
提取物不起作用：
- .dynamic div {
- -webkit-filter: url('#f2');
- filter: url('#f2');
- }
- ...
- var svg = document.createElement("svg");
- var filter = document.createElement("filter");
- filter.setAttribute("id","f2");
- var blur = document.createElementNS("http://www.w3.org/2000/svg","feGaussianBlur");
- blur.setAttribute("stdDeviation","5");
- filter.appendChild(blur);
- svg.appendChild(filter);
- document.body.appendChild(svg);
- ...
- <div class="dynamic">
- <div><img src="http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" /></div>
- <div>HELLO WORLD TWO</div>
- </div>
html语法看起来完全相同.我猜测document.createElement不会创建具有svg功能的标签,也可能只是在文档加载时读取过滤器ID.但是,我可以在静态示例中动态更改stdDeviation的值.
解决方法
试试这个：
- var NS = "http://www.w3.org/2000/svg";
- var svg = document.createElementNS( NS,"svg" );
- var filter = document.createElementNS( NS,"filter" );
- filter.setAttribute( "id","f2" );
- var blur = document.createElementNS( NS,"feGaussianBlur" );
- blur.setAttribute( "stdDeviation","5" );
- filter.appendChild( blur );
- svg.appendChild( filter );
- document.body.appendChild( svg );
