SVG-пути не отображаются в Safari

У меня есть SVG-файл иконок, который выглядит следующим образом:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <path id="instagram" d="..."/>
  <path id="linkedin" d="..."/>
  <path id="twitter" d="..."/>
</svg>

И это упоминается в моем HTML, как это:

  <a href="...">
    <svg viewBox="0 0 32 32"><use xlink:href="icons.svg#instagram"></svg>
  </a>
  <a href="...">
    <svg viewBox="0 0 32 32"><use xlink:href="icons.svg#linkedin"></svg>
  </a>
  <a href="...">
    <svg viewBox="0 0 32 32"><use xlink:href="icons.svg#twitter"></svg>
  </a>

И, как и многие вопросы до этого, SVG не рендерится в Safari ни на настольных компьютерах, ни на мобильных устройствах.

Есть ли способ сделать так, чтобы они отображались с <svg> теги, которые работают во всех браузерах? Я хотел бы не редактировать CSS, который стилизует <svg> теги, если это возможно. Это <object> пометить единственное решение, которое работает во всех браузерах? Имеется в виду id пути также действительны с <object> тег?

Спасибо!

0 ответов

Другие вопросы по тегам