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

Posted 2023-03-06

【中文标题】动态注入 SVG 过滤器并应用于 HTML

【英文标题】：Dynamically injecting SVG filters and applying to HTML

【发布时间】：2013-12-17 19:55:01

【问题描述】：

我正在尝试将 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 的值。

【参考方案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 );

【讨论】：

立即工作，谢谢！您能否解释或发布一个链接来解释为什么我需要调用的 namespace URI 版本？

如果您不将 SVG 元素放在 SVG 命名空间中，那么它们最终会出现在默认 (HTML) 命名空间中，并且不会被 SVG 解析器识别。