我正在尝试将 SVG 过滤器应用于 HTML。如果所有内容都是硬编码,这将起作用,尽管我需要 chrome 的 -webkit-filter
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
的值。
最佳答案
试试这个:
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 );
关于javascript - 动态注入(inject) SVG 过滤器并应用于 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20322685/