Блог

Главная - Вопросы по программированию - Включить и ссылаться на фактический необработанный SVG на странице

Включить и ссылаться на фактический необработанный SVG на странице

#svg

#svg

Вопрос:

Мы используем платформу, которая не позволяет загружать файлы SVG. У нас есть внешние страницы, которые настроены с помощью кода для автоматической загрузки идентификатора, и у нас также есть переключение JavaScript для некоторых элементов.

Пример:

 <span class="spirit-form__checkbox-visual">
            <svg aria-label="check" class="spirit-icon spirit-form__checkbox-checked-icon" aria-hidden="true">
              <use xlink:href="/icons.svg#check">
              </use>
            </svg>
            <svg aria-label="minus" class="spirit-icon spirit-form__checkbox-indeterminate-icon" aria-hidden="true">
              <use xlink:href="/icons.svg#minus">
              </use>
            </svg>
          </span>

Я попытался сослаться на них в другом домене, и они не будут загружаться — я полагаю, из-за междоменной безопасности.

Есть ли способ поместить необработанное XML-содержимое icons.svg в сам файл, а затем ссылаться на него в пределах диапазона? Этот файл повторяется на всей странице, поэтому я не хочу вставлять его повсюду.

Комментарии:

1. Одним из альтернативных методов является создание SVG для значков на стороне клиента, обернутого в веб-компонент. См iconmeister.github.io

2. Если вы запрашиваете решение на стороне сервера, просто вставьте содержимое файла SVG где-нибудь в теле страницы и установите размер корня <svg> в width = height = 0 с помощью CSS.

Метки: