SVG 文本未在 Edge 或 IE 中显示答案

【问题标题】：SVG text not showing in Edge or IESVG 文本未在 Edge 或 IE 中显示
【发布时间】：2018-10-19 06:21:35
【问题描述】：

我正在使用下面的代码将图像放入 SVG 中，并在其正下方放置一些文本：

<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)" />
            <text baseline-shift="-130px" text-anchor="bottom" class="smallh2">headertext</text>
            <text baseline-shift="-160px" text-anchor="bottom" class="smallh2" id="objecta"></text>
        </svg>
      </td>
    </tr>
  </table>
</td>

第一个<text> 显示标题，而第二个调用具有图形的 html 元素。上面的代码在谷歌浏览器中运行良好，但不知何故在 IE 和 Edge 中没有显示文本。

【问题讨论】：

您可以使用 x 和 y 来代替基线移位。它会起作用的。

标签： html internet-explorer svg microsoft-edge

【解决方案1】：

用 y 替换文本的基线移位。它适用于所有浏览器。

<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)" />
                <text y="130" text-anchor="bottom" class="smallh2">headertext</text>
                <text baseline-shift="-160px" text-anchor="bottom" class="smallh2" id="objecta"></text>
            </svg>

【讨论】：