Встроенный SVG не отображается в XHTML

Я создал XHTML-файл со встроенным SVG. Он не отображается при тестировании в формате.XHTML, но отображается при тестировании в формате HTML. Я обыскивал Интернет и считаю, что у меня есть правильные пространства имен и т. Д., Однако, я озадачен, почему он не отображается. Пожалуйста, помогите мне понять, что я делаю неправильно.

Примечание: я также пробовал с или без xlink, и я не вижу изменений (однако мне требуется xlink, так как мне нужна поддержка сафари).

Заранее спасибо за помощь!

Пример: index.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http-www.w3.org/2000/svg" xmlns:xlink="http-www.w3.org/1999/xlink">

<head>
  <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
  <title>inline svg in XHTML file</title>
</head>

<body>

  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px">
  <defs>
    <symbol id="icon-home" viewBox="0 0 32 32"><title>Home Icon</title>
      <path d="M32,19.271L16,5.582L0,19.271v-5.582L16,0l16,13.689V19.271z M28,18.773V32h-8v-8.817h-8V32H4V18.773l12-9.919L28,18.773z" />
    </symbol>
  </defs>
</svg>

  <div>
    <a href="#"><svg style="width:32px; height:32px;" viewBox="0 0 32 32"><use xlink:href="#icon-home" /></svg>&nbsp;home</a>
  </div>

</body>
</html>

Источник

1 ответ

Использовать xmlns атрибуты в самом низу <svg> а потом будет работать

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http-www.w3.org/2000/svg" xmlns:xlink="http-www.w3.org/1999/xlink">

<head>
  <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
  <title>inline svg in XHTML file</title>
</head>

<body>

  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" height="0">
  <defs>
    <symbol id="icon-home" viewBox="0 0 32 32"><title>Home Icon</title>
      <path d="M32,19.271L16,5.582L0,19.271v-5.582L16,0l16,13.689V19.271z M28,18.773V32h-8v-8.817h-8V32H4V18.773l12-9.919L28,18.773z" />
    </symbol>
  </defs>
</svg>

  <div>
    <a href="#"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width:32px; height:32px;" viewBox="0 0 32 32"><use xlink:href="#icon-home" /></svg>&nbsp;home</a>
  </div>

</body>
</html>

Кстати, как <svg> в XHTML был определен только с XHTML5, использование типа документа XHTML 1.0 не будет проверяться (даже если он будет отлично работать с правильными пространствами имен). Решение состоит в том, чтобы изменить тип документа на XHTML5.

Источник

Дважды проверьте, что вы используете .xhtml расширение файла, убедитесь, что ваш svg имеет следующее:

<svg xmlns="http://www.w3.org/2000/svg">
</svg>

Источник

Источник
Другие вопросы по тегам