Небезопасная попытка загрузить URL-адрес svg

Я получаю сообщение об ошибке в Chrome от попытки загрузить SVG в локальной файловой системе:

Небезопасная попытка загрузить файл URL:///C:/Users/Me/Documents/HTML/icons.svg#menu из фрейма с URL файлом:///C:/Users/Me/Documents/HTML/master.html. Домены, протоколы и порты должны соответствовать.

Вот мой HTML:

<svg id="icon-menu" viewBox="0 0 70 60">
   <use xlink:href="icons.svg#menu"></use>
</svg>

и SVG:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 70 70">
  <g
     id="menu">
    <path
       d="m 10,15 50,0"
       style="fill:none;stroke:#ffffff;stroke-width:4;stroke-linecap:round;" />
    <path
       d="m 10,30 50,0"
       style="fill:none;stroke:#ffffff;stroke-width:4;stroke-linecap:round;" />
    <path
       d="m 10,45 50,0"
       style="fill:none;stroke:#ffffff;stroke-width:4;stroke-linecap:round;" />
  </g>
</svg>

Я искал в Интернете, но единственные решения, которые я могу найти, - это код, уже написанный на JavaScript, но это не так. HTML выше не работает в IE, не давая ошибки, но работает без сбоев в Firefox.

ОТВЕТЫ

Ответ 1

На этой странице есть все ответы, я считаю:

https://css-tricks.com/svg-use-external-source/

  • Это просто не работает в IE, если вы не используете polyfill.
  • Комментарии внизу страницы описывают проблему Chrome при локальном запуске:

Вы можете столкнуться с некоторыми междоменными проблемами с этой техникой при локальной разработке, если вы не разрабатываете с сервером.

Ответ 2

Как я писал на davidwells.io (на этой странице также находится его решение проблемы Javascript):

У меня была такая же проблема, когда я использовал внешний SVG файл. Мне пришлось изменить конфигурацию виртуального сервера и остановить автоматическое перенаправление запросов SVG с HTTP на HTTPS. Другие слова: SVG файл должен быть доступен для обоих протоколов. Теперь он работает.

Ответ 3

используйте сервер, такой как express.js или apache или nginx, чтобы обслуживать нужные вам файлы, предпочтительно svg sprite, который содержит все ваши изображения, которые вы можете использовать, чтобы вы могли ссылаться на них в шаблоне или интерфейсе, как это

<svg style="color: red;">
    <use xlink:href="solid.svg#ad"></use>
</svg>

и в конце, если вы используете Express.js в вашем файле server.js, как это,

app.use(express.static(__dirname + '/node_modules/@fortawesome/fontawesome-free/sprites'));

^ ссылаться на статический каталог, где живет ваш svg-спрайт, чтобы избежать проблем с CORS. Другой способ - установить заголовки, используя ajax, который другой человек выше меня разместил на css-tricks.