为何SVG标签内的<p>标签会显示在SVG外部？

这是因为SVG属于独立的XML命名空间，它只识别SVG专属元素（比如<rect>、<text>、<circle>这类），HTML的<p>标签并不在SVG的合法元素范围内。

当浏览器解析到SVG内部的HTML元素时，会触发错误恢复机制：直接把不属于SVG命名空间的元素从SVG节点里移出来，放到SVG的同级位置，所以你看到的<p>就跑到了SVG外部。

正确的实现方式 #

1. 用SVG原生的<text>元素 #

如果只是要显示文本，优先用SVG自带的<text>标签，它是专门为SVG场景设计的文本元素：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <svg width="200" height="50">
      <text x="10" y="25" font-size="16">test</text>
    </svg>
  </body>
</html>

2. 用<foreignObject>包裹HTML元素 #

如果确实需要在SVG里嵌入HTML内容，必须用<foreignObject>标签，它允许在SVG中包含非SVG命名空间的元素：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <svg width="200" height="50">
      <foreignObject width="100%" height="100%">
        <p xmlns="http://www.w3.org/1999/xhtml">test</p>
      </foreignObject>
    </svg>
  </body>
</html>

注意：<foreignObject>必须指定宽高，且内部的HTML元素要声明HTML命名空间（xmlns="http://www.w3.org/1999/xhtml"），这样浏览器才能正确识别并渲染。

内容的提问来源于stack exchange，提问作者jop frenken