如何在SVG文本内指定位置插入图片并合理占用空间？

SVG的<text>元素仅允许包含文本内容及<tspan>、<tref>这类文本相关子元素，直接嵌套<image>会被忽略，这就是你原来写法失效的原因。下面提供两种可行的解决思路：

方案一：纯SVG实现，对齐文本流 #

通过独立的<image>元素配合文本基线对齐，无需精确手动计算位置，还可以用JS动态适配不同场景：

静态SVG示例（估算位置） #

<svg width="300" height="50" xmlns="http://www.w3.org/2000/svg">
  <!-- 用空tspan标记图片插入的位置 -->
  <text x="10" y="30" font-size="20">
    The
    <tspan id="img-anchor" x="10" dy="0"></tspan>
    jumped over the moon
  </text>
  <!-- 对齐文本基线放置图片 -->
  <image 
    href="cow.png" 
    width="20" 
    height="20" 
    x="55" <!-- 对应tspan的位置，静态场景下可估算 -->
    y="20" <!-- 文本y值减去图片高度的一半，保证垂直居中 -->
    dominant-baseline="middle"
  />
</svg>

动态适配（JS自动计算位置） #

如果需要适配不同文本内容或字体大小，用JS获取<tspan>的位置来自动定位图片：

const anchor = document.getElementById('img-anchor');
const bbox = anchor.getBBox();
const img = document.querySelector('image');
// 将图片定位到tspan的起始位置，垂直居中对齐文本
img.setAttribute('x', bbox.x);
img.setAttribute('y', bbox.y + bbox.height / 2);
img.setAttribute('dominant-baseline', 'middle');

方案二：用<foreignObject>嵌入HTML（最简单的图文混排） #

利用HTML天然的图文混排能力，在SVG中嵌入HTML内容，自动处理空间占用和排版：

<svg width="300" height="50" xmlns="http://www.w3.org/2000/svg">
  <foreignObject x="10" y="10" width="280" height="30">
    <div xmlns="http://www.w3.org/1999/xhtml" style="font-size:20px; line-height:1.4;">
      The <img src="cow.png" width="20" height="20" style="vertical-align:middle;" /> jumped over the moon
    </div>
  </foreignObject>
</svg>

这种方式无需手动计算任何位置，HTML会自动让图片和文本对齐并占用合理空间，唯一需要注意的是部分旧环境可能不支持<foreignObject>，但现代浏览器和主流SVG渲染工具都兼容。

内容的提问来源于stack exchange，提问作者Matt Stoodley