如何附加一个<svg>元素与香草 JavaScript？

Question

以下 vanilla 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>元素并使过滤器工作？

Answer 1

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>

如何附加一个<svg>元素与香草 JavaScript？

问题描述

1 个解决方案

解决方案1
4 已采纳 2020-03-22 01:05:47

如何附加一个<svg>元素与香草 JavaScript？

问题描述

1 个解决方案

解决方案1 4 已采纳 2020-03-22 01:05:47

解决方案1
4 已采纳 2020-03-22 01:05:47