如何添加换行符的结束标签（由于html标准无法保存更改）

Question

我需要将 DOM 结构保存为 SVG 图像。为此，我根据 SVG 标准转换一些元素。 SVG 要求换行符和 img 标签应有结束标签。

当我尝试在innerHTML中替换它们时，它会自动转换回html标准（没有结束标签）。同样，当我只添加结束换行符标签时，我只得到两个换行符标签。

有没有办法将其转换为SVG标准？

var someText1 = main.getElementsByTagName("span")[0];
someText1.innerHTML = someText1.innerHTML.replace(/<br>/g, '<br />');
console.log(someText1.innerHTML);

var someText2 = main.getElementsByTagName("span")[1];
someText2.innerHTML = someText2.innerHTML.replace(/<br>/g, '<br></br>');
console.log(someText2.innerHTML);

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">
  <foreignObject id="main" width="100%" height="100%" x="0" y="0">
    <span>one<br>two</span>
    <span>three<br>four</span>
  </foreignObject>
</svg>

Answer 1

您正在使用

.innerHTML

替换字符串，它适用于字符串，当浏览器呈现您请求的内容时，它将只是 HTML（有效 HTML）。 我不好解释更多相关内容，但我建议您阅读此页，因为他们解释得很好。

为了使您的

<br>

成为有效的 SVG，我建议您改用 DOM 对象。

首先将

br

元素创建到变量中。

const brElement = document.createElementNS("http://www.w3.org/2000/svg", 'br');

然后更换它们。这是完整的代码。

const brElement = document.createElementNS("http://www.w3.org/2000/svg", 'br');
var someText1 = main.getElementsByTagName("span")[0];
someText1.querySelector('br').replaceWith(brElement);
console.log(someText1.innerHTML);

var someText2 = main.getElementsByTagName("span")[1];
someText2.querySelector('br').replaceWith(brElement);
console.log(someText2.innerHTML);

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">
  <foreignObject id="main" width="100%" height="100%" x="0" y="0">
    <span>one<br>two</span>
    <span>three<br>four</span>
  </foreignObject>
</svg>

代码运行后，它将更改为

<br>

为

<br></br>

，我希望这是您想要的有效 SVG。