Question

我正在将SVG过滤器应用于HTML。如果所有内容都是硬编码的，那么这是有效的，尽管我需要-webkit-filter用于chrome的CSS ID。当尝试使用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的值。

Answer 1

试试这个：

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

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

1 个答案: