如何使用<svg>vanilla JavaScript附加元素？

下面的普通Javascript代码附加了<svg>和<style>元素

var text="";
text=text+"<defs>"
text=text+"<filter id='Matrix' filterUnits='objectBoundingBox' x='0%' y='0%' width='100%' height='100%'>"
text=text+"<feColorMatrix type='matrix' in='SourceGraphic' values='0 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0'/>"
text=text+"</filter>"
text=text+"</defs>"
var tag;
tag = document.createElement("svg");
document.body.appendChild(tag);
tag.innerHTML=text;
tag = document.createElement("style");
document.body.appendChild(tag);
tag.innerHTML="img.free {filter:url('#Matrix')}";

从以下html代码中的图像中删除红色：

<head>
</head>
<body>
<img class="free" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/500px-Google_2015_logo.svg.png">
</body>

(此处为jsfiddle(

但是，不应用<svg>元素内部的过滤器。

请注意，页面的静态版本(此处为jsfiddle(没有这样的问题。

如何通过Javascript注入<svg>元素并使过滤器工作？

必须在SVG命名空间中创建SVG元素。

var text="";
text=text+"<defs>"
text=text+"<filter id='Matrix' filterUnits='objectBoundingBox' x='0%' y='0%' width='100%' height='100%'>"
text=text+"<feColorMatrix type='matrix' in='SourceGraphic' values='0 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0'/>"
text=text+"</filter>"
text=text+"</defs>"
var tag;
tag = document.createElementNS("http://www.w3.org/2000/svg", "svg");
document.body.appendChild(tag);
tag.innerHTML=text;
tag = document.createElementNS("http://www.w3.org/2000/svg", "style");
document.body.appendChild(tag);
tag.innerHTML="img.free {filter:url('#Matrix')}";

<head>
</head>
<body>
<img class="free" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/500px-Google_2015_logo.svg.png">
</body>

相关内容

最新更新

热门标签：