问题描述
我想用 <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>