如何在浏览器渲染含foreignObject的Base64编码SVG？

我编写了一段SVG代码，将其Base64编码后通过data:image/svg+xml;base64,XXX格式在浏览器中展示，但<foreignObject>中的文本无法显示，该如何解决？

相关代码信息 #

• 原始SVG代码：

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" viewBox="0 0 500 250">
  <style>
    div {
      font: 14px serif;
      height: 200px;
      width: 480px;
      margin-top: 10px;
      overflow: auto;
    }

    .base {
      font-family: serif;
      font-size: 14px;
    }
  </style>
  <rect x="0" y="0" rx="10" ry="10" width="500" height="250" style="fill:white;stroke:black;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
  <foreignobject x="8" y="8" width="490" height="240">
    <text x="10" y="160" class="base">Category:xaxaxa</text>
    <div>hebele hubele bum bam bum</div>
  </foreignobject>
</svg>

• 生成的Base64编码：

PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaW5ZTWluIG1lZXQiIHZpZXdCb3g9IjAgMCA1MDAgMjUwIj48c3R5bGU+ZGl2IHtmb250OiAxNHB4IHNlcmlmO2hlaWdodDoyMDBweDt3aWR0aDo0ODBweDttYXJnaW4tdG9wOjEwcHg7b3ZlcmZsb3c6IGF1dG87fS5iYXNlIHsgZm9udC1mYW1pbHk6IHNlcmlmOyBmb250LXNpemU6IDE0cHg7IH08L3N0eWxlPjxyZWN0IHg9IjAiIHk9IjAiIHJ4PSIxMCIgc3Ryb2tlLW9wYWNpdHk6MC45IiAvPjxmb3JlaWdub2JqZWN0IHg9IjgiIHk9IjgiIHdpZHRoPSI0OTAiIGhlaWdodD0iMjQwIj48dGV4dCB4PSIxMCIgeT0iMTYwIiBjbGFzcz0iYmFzZSI+Q2F0ZWdvcnk6eGF4YXhhPC90ZXh0PjxkaXYgPmhlYmVsZSBodWJlbGUgYnVtIGJhbSBidW08L2Rpdj48L2ZvcmVpZ25vYmplY3Q+PC9zdmc+

• 生成的Data URI链接：

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaW5ZTWluIG1lZXQiIHZpZXdCb3g9IjAgMCA1MDAgMjUwIj48c3R5bGU+ZGl2IHtmb250OiAxNHB4IHNlcmlmO2hlaWdodDoyMDBweDt3aWR0aDo0ODBweDttYXJnaW4tdG9wOjEwcHg7b3ZlcmZsb3c6IGF1dG87fS5iYXNlIHsgZm9udC1mYW1pbHk6IHNlcmlmOyBmb250LXNpemU6IDE0cHg7IH08L3N0eWxlPjxyZWN0IHg9IjAiIHk9IjAiIHJ4PSIxMCIgc3Ryb2tlLW9wYWNpdHk6MC45IiAvPjxmb3JlaWdub2JqZWN0IHg9IjgiIHk9IjgiIHdpZHRoPSI0OTAiIGhlaWdodD0iMjQwIj48dGV4dCB4PSIxMCIgeT0iMTYwIiBjbGFzcz0iYmFzZSI+Q2F0ZWdvcnk6eGF4YXhhPC90ZXh0PjxkaXYgPmhlYmVsZSBodWJlbGUgYnVtIGJhbSBidW08L2Rpdj48L2ZvcmVpZ25vYmplY3Q+PC9zdmc+

效果对比 #

• 预期效果：白色带黑色边框的圆角容器内，显示两行文本内容
• 实际效果：仅显示容器边框，内部文本完全不显示

1. 修正标签大小写错误 #

SVG标签名区分大小写，原始代码里的<foreignobject>（小写o）必须改为<foreignObject>（首字母O大写），这是内容无法渲染的核心原因之一。

2. 为HTML元素声明命名空间 #

<foreignObject>用于嵌入非SVG内容（如HTML），必须明确为内部的HTML元素声明HTML命名空间。同时注意：SVG的<text>元素不属于HTML命名空间，不能放在<foreignObject>内，建议替换为HTML的文本标签（如<p>、<span>）。

修正后的完整SVG代码 #

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" viewBox="0 0 500 250">
  <style>
    div {
      font: 14px serif;
      height: 200px;
      width: 480px;
      margin-top: 10px;
      overflow: auto;
    }

    .base {
      font-family: serif;
      font-size: 14px;
    }
  </style>
  <rect x="0" y="0" rx="10" ry="10" width="500" height="250" style="fill:white;stroke:black;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
  <foreignObject x="8" y="8" width="490" height="240">
    <div xmlns="http://www.w3.org/1999/xhtml">
      <p class="base">Category:xaxaxa</p>
      <div>hebele hubele bum bam bum</div>
    </div>
  </foreignObject>
</svg>

重新编码后的有效Data URI #

将修正后的SVG代码Base64编码后，得到可正常显示的链接：

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaW5ZTWluIG1lZXQiIHZpZXdCb3g9IjAgMCA1MDAgMjUwIj48c3R5bGU+ZGl2IHtmb250OiAxNHB4IHNlcmlmO2hlaWdodDoyMDBweDt3aWR0aDo0ODBweDttYXJnaW4tdG9wOjEwcHg7b3ZlcmZsb3c6IGF1dG87fS5iYXNlIHsgZm9udC1mYW1pbHk6IHNlcmlmOyBmb250LXNpemU6IDE0cHg7IH08L3N0eWxlPjxyZWN0IHg9IjAiIHk9IjAiIHJ4PSIxMCIgc3Ryb2tlLW9wYWNpdHk6MC45IiAvPjxmb3JlZ29OYm9jdCB4PSI4IiB5PSI4IiB3aWR0aDo0OTAiIGhlaWdodD0iMjQwIj48ZGl2IHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hodG1sIj48cCBjbGFzcz0iYmFzZSI+Q2F0ZWdvcnk6eGF4YXhhPC9wPjxkaXY+SGViZWxlIGh1YmVsZSBidW0gYmFtIGJ1bTwvZGl2PjwvZGl2PjwvZm9yZWlnb0JvY3Q+PC9zdmc+

内容的提问来源于stack exchange，提问作者Barkın Tuncer