嘿，我来帮你搞定这个跨浏览器的SVG文本显示问题！先说说核心原因：你用baseline-shift来定位文本，但这个属性在IE和Edge里支持非常有限——它本来是用来微调单个字符基线的，根本不是用来整体移动文本块的，这就是为啥Chrome能正常渲染，IE/Edge却不显示的关键。

SVG里<text>元素的标准定位方式是用x和y属性，咱们调整代码就能解决兼容性问题，同时保持原有的视觉效果：

<td>
  <table>
    <tr>
      <td>
        <svg width="200" height="250">
          <defs>
            <clipPath id="circleView">
              <circle cx="50" cy="50" r="50" fill="#FFFFFF" />
            </clipPath>
          </defs>
          <image width="100" height="100" xlink:href="http://etc.usf.edu/clipart/63300/63348/63348_clock_500_md.gif" clip-path="url(#circleView)" />
          <!-- 标题文本：用x/y精准定位，保持居中对齐 -->
          <text x="50" y="170" text-anchor="middle" class="smallh2">headertext</text>
          <!-- 第二个文本元素：同样用标准定位方式 -->
          <text x="50" y="200" text-anchor="middle" class="smallh2" id="objecta"></text>
        </svg>
      </td>
    </tr>
  </table>
</td>

关键调整说明： #

• 移除了不兼容的baseline-shift，改用x="50"（对应圆形图片的中心x坐标，确保水平居中）和y值来控制文本垂直位置；
• y="170"和y="200"对应图片下方的合适位置，你可以根据需求调整数值来改变文本和图片的间距；
• 保留text-anchor="middle"让文本相对于x值居中，和你原来的视觉效果一致。

另外，如果你打算在第二个文本区域嵌入HTML元素，SVG的<text>是不支持直接包含HTML内容的，得改用<foreignObject>元素，这样在IE/Edge里也能正常渲染，示例如下：

<svg width="200" height="250">
  <!-- 其他SVG内容不变 -->
  <foreignObject x="25" y="180" width="150" height="50">
    <div xmlns="http://www.w3.org/1999/xhtml" class="smallh2" id="objecta">
      <!-- 这里放入你的HTML元素内容 -->
    </div>
  </foreignObject>
</svg>

这样调整后，文本在Chrome、IE和Edge里都能正常显示啦～

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