Question

我正在使用下面的代码将图像放在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中的文本。

Answer 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>

SVG文本未在Edge或IE中显示

1 个答案: