Javascript 动态注入SVG过滤器并应用于HTML

我正在尝试将SVG过滤器应用于HTML。如果所有内容都是硬编码的，那么这个功能就可以工作，不过我需要chrome的

-webkit过滤器
CSS id。尝试使用javascript动态创建带有过滤器的SVG元素时失败。有人能解释为什么吗

以下是我目前掌握的情况：

第一对图像和文本在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>

.dynamic div{
-webkit筛选器：url（'#f2'）；
过滤器：url（'#f2'）；
}
...
var svg=document.createElement（“svg”）；
var filter=document.createElement（“过滤器”）；
filter.setAttribute（“id”、“f2”）；
var blur=document.createElements（“http://www.w3.org/2000/svg“，“feGaussianBlur”）；
blur.setAttribute（“stdDeviation”、“5”）；
filter.appendChild（模糊）；
appendChild（过滤器）；
document.body.appendChild（svg）；
...
你好，世界二号

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 );

马上就好，谢谢！您是否可以解释或发布一个链接，解释为什么我需要调用的名称空间URI版本？如果您不将SVG元素放入SVG名称空间，那么它们最终会进入默认（HTML）名称空间，并且SVG解析器无法识别。