尝试在 SVG 中嵌套 appendChild

Question

基于此： https://dev.to/gavinsykes/appending-a-child-to-an-svg-using-pure-javascript-1h9g

我试图在 SVG 的 defs 部分中添加一个过滤器……但它没有用。 当我尝试时它给了我一个错误：Oo_banner.defs.appendChild(filter) Oo_banner 是 SVG 的 id。

所以我开始思考我可以在 SVG 的末尾定义我的模糊过滤器，但即使这样也不起作用，因为它将 feGaussianBlur 放在过滤器标记之后。 无论如何，这是我的代码：

    <svg id="Oo_banner"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 300">
      <defs>
        
      </defs>
      <rect id="subj" x="30" y="30" width="70" height="70" fill="#f9f"/>
    </svg>

<script>
    var Oo_banner = document.querySelector("#Oo_banner"),
    subj=document.querySelector("#subj"),
    filter = document.createElementNS('http://www.w3.org/2000/svg','filter');
    filter.setAttribute('id','blur_subj');
    Oo_banner.appendChild(filter);
    var filterBlur = document.createElementNS('http://www.w3.org/2000/svg','feGaussianBlur');
    filterBlur.setAttribute('id','blur_subj_');
    filterBlur.setAttribute('stdDeviation','15');
    Oo_banner.appendChild(filterBlur);
    subj.setAttribute('filter','url(#blur_subj)');
</script>

我还在这里做了一个围栏： https://codepen.io/trufo/pen/dyWbOQp

这是我在 Chrome 中检查页面时得到的结构： https://i.imgur.com/Et1Lv4h.png

所以我有三个问题：

1.) 如何在 SVG 的 defs 部分附加标签（过滤器）？

2.) 如何在刚刚创建的标签内添加标签（feGaussianBlur）？

3.) 如何在没有结束标签的情况下制作最后一个标签 (feGaussianBlur)（例如 img 标签）

谢谢

Answer 1

我认为你的属性和你的 DOM id 很困惑。如果您想将子元素附加到 defs，则获取对 defs 元素的 DOM 引用 - 您只需将该 id 从 SVG 向下移动到 defs 即可。

然后，如果您想将 feGaussianBlur 嵌套在过滤器中，请将其附加到过滤器 DOM 元素 - 而不是 svg 元素。

（另外 - 我鼓励更好的命名 - 用尾随下划线区分两个不同的 ID 会给你带来麻烦。）

const Oo_banner = document.querySelector("#Oo_banner");
let subj = document.querySelector("#subj");
filter = document.createElementNS('http://www.w3.org/2000/svg','filter');
filter.setAttribute('id','blurme');
Oo_banner.appendChild(filter);
let filterBlur = document.createElementNS('http://www.w3.org/2000/svg','feGaussianBlur');
filterBlur.setAttribute('id','blur_subj_');
filterBlur.setAttribute('stdDeviation','2');
filter.appendChild(filterBlur);
subj.setAttribute('filter','url(#blurme)');

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 300">
<defs id="Oo_banner">
</defs>
  
  <rect id="subj" x="30" y="30" width="70" height="70" fill="green"/>
  
</svg>