Safari fails to replace SVG element with: NoModificationAllowedError: The object can not be modified

Question

我想用 foreignObject 替换我所有 SVG 的 <rect> 元素，这在 FireFox 和基于 Chromium 的浏览器中运行良好，但在 Safari 中失败。

MWE:

HTML/SVG

<!DOCTYPE html>
<html lang="en">
  <body>
    <svg>
      <rect id="rect1" width="100" height="100" />
    </svg>
  </body>
</html>

JavaScript

let myRect = document.getElementById("rect1")
myRect.outerHTML = myRect.outerHTML.replace("<rect", "<foreignObject").replace("</rect>", "</foreignObject>")

Safari 失败：NoModificationAllowedError: The object can not be modified.

我知道问题是由于 outerHTML 在 HTML 命名空间上，而 SVG 在 XML 上，但是有没有办法让这个在 SVG 中工作？

感谢您对此问题的任何见解。

Answer 1

替换字符串很容易出错

替换元素.. 在复制属性后

<svg id=SVG>
  <rect id="rect1" width="100" height="100" />
  <g>    
    <rect id="rect2" width="100" height="100" />
  </g>
</svg>

<script>
  let svg = SVG;
  svg.querySelectorAll("rect").forEach(rect => {
    let obj = document.createElementNS("http://www.w3.org/2000/svg", "foreignObject");
    [...rect.attributes].map(  ({name,value}) => obj.setAttribute(name, value)  );
    rect.replaceWith(obj);
  });
  console.log(SVG.outerHTML);
</script>

PS 无法读取 rect.parentNode.replaceChild(obj, rect); 对于 IE11

Safari fails to replace SVG element with: NoModificationAllowedError: The object can not be modified

Safari fails to replace SVG element with: NoModificationAllowedError: The object can not be modified

html

javascript

safari

svg

foreignobject

MWE: