前端之家

  1. 首页
  2. 问答

Safari 无法将 SVG 元素替换为：NoModificationAllowedError: The object can not be modified MWE：

• 问答

我想用 <rect> 替换我所有 SVG 的 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 中实现这一点？

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

zhangshaodan123 回答：Safari 无法将 SVG 元素替换为：NoModificationAllowedError: The object can not be modified MWE：

替换字符串很容易出错

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

select list,max(case when seqnum = 1 then ename end) as ename_1,max(case when seqnum = 1 then edesc end) as edesc_1,max(case when seqnum = 2 then ename end) as ename_2,max(case when seqnum = 2 then edesc end) as edesc_2,max(case when seqnum = 3 then ename end) as ename_3,max(case when seqnum = 3 then edesc end) as edesc_3
from (select d.*,row_number() over (partition by list order by num) as seqnum
      from dataset d
     ) d
group by list;

针对 IE11 的 PS 不可读 <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>

foreignobjecthtmljavascriptsafarisvg
本文链接：https://www.f2er.com/729377.html

大家都在问