为什么我的 <image> 在 appendChild 上变成 <img> ？ [SVG]答案

【问题标题】：Why my <image> become <img> on appenChild ? [SVG]为什么我的 <image> 在 appendChild 上变成 <img> ？ [SVG]
【发布时间】：2021-05-03 07:09:39
【问题描述】：

根据上下文，我需要将 SVGImageElement（又名简单字符串）添加到 SVG 组 (<g>)。所以我将我的字符串转换为 HTMLNode，然后将其添加到我的组中。

我的问题出在工作流程上，我的字符串 <image> 变成了一个 <img> html 元素，不幸的是我无法在我的 SVG 命名空间内使用 <img> 做任何事情（我需要 @ 987654325@yheightwidth...)

我不明白为什么这个工作流程会覆盖我的字符串？我错过了什么吗？

有字符串：'<image id="ctrlLeft" xlink:href="https://img.icons8.com/fluent/48/000000/move.png" x="0" y="-200" height="200" width="200"></image>'

我以这种方式转换字符串并将其添加到组中：

  var ctrlMove = '<image id="ctrlLeft" xlink:href="https://img.icons8.com/fluent/48/000000/move.png" x="0" y="-200" height="200" width="200"></image>';
  var gMove = document.createElement("g");
  gMove.setAttribute("id", "ctrlMove");
        
  var r = document.createRange();
  r.selectNodeContents(gMove);
  var f = r.createContextualFragment(ctrlMove);
  gMove.appendChild(f); // InnerHTML show <img> instead of <image>

谢谢！

【问题讨论】：

标签： javascript html svg dom

【解决方案1】：

我猜 gMove 元素是在 HTML 命名空间中创建的，其中 <image> 是 <img> 的旧别名。

尝试改变

var gMove = document.createElement("g");

到

var gMove = document.createElementNS("http://www.w3.org/2000/svg", "g");

【讨论】：

嗯...谢谢 :') 太明显了