我正在玩将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 );