我正在玩将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); ...HELLO WORLD TWO
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 );