0

我想替换我所有的 SVG<rect>元素，foreignObject这些元素在 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 中完成这项工作？

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

4

1 回答 1

2

替换字符串很容易出错

复制属性后替换元素..

<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无法读取

于 2021-03-19T14:21:20.193 回答