如何解决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 中实现这一点？
感谢您对此问题的任何见解。
解决方法
替换字符串很容易出错
替换元素.. 之后复制属性
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>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。