Текст SVG не отображается в Edge или IE - PullRequest
Новая
       11

Текст SVG не отображается в Edge или IE

0 голосов
/ 09 мая 2018

Я использую приведенный ниже код, чтобы поместить изображение в 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-элемент, который имеет рисунок. Приведенный выше код работает довольно хорошо в Google Chrome, но почему-то не отображает текст в IE и Edge.

1 Ответ

0 голосов
/ 09 мая 2018

Заменить смещение базовой линии на 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>
...