Не отображается svg в браузере

Обновлено: 07.07.2024

Внутри моего веб-сайта я вставляю несколько svg. Все они работают отлично в Chrome, Firefox, IE (9+) и в Safari. Howvere, как только изображение, включенное в svg, сафари не отображает изображение.

В соответствии с предыдущей аналогичной темой я пробовал следующее:

Изображение SVG не отображается в Safari - Я не считаю это очень полезным, потому что это удаляет aprt svg.

И кроме того, я действительно не знаю, что еще попробовать. Возможно, еще одна интересная вещь: внутри моей страницы изображение не отображается, но я могу открыть svg файл в сафари (только файл), и он будет правильно отображаться. Более того, после того, как он открывается в браузере в виде файла, он также отображается внутри страницы. И я вставляю svg на страницу с тегом img.

У меня есть уменьшенная строка изображения base64, чтобы сократить код. Полный svg можно найти здесь.

UPDATE: просто чтобы быть ясным, svg показывает в браузере (сафари), но изображение отсутствует (я вижу только границу).

ОТВЕТЫ

Ответ 1

Обходной путь, который мы используем в нашем приложении, состоит в том, чтобы иметь script, который находит все элементы img , отображающие изображения SVG, и добавляет скрытые элементы object , загружая одни и те же SVG ( <object style="position: fixed; width: 0; height: 0;" data="image.svg" type="image/svg+xml"></object> ).

Причина, по которой он работает, заключается в том, что тег object правильно загружает внедренные изображения в кеш изображения, так что они видны внутри SVG, загружаемых с помощью тегов img .

Преимущество такого подхода заключается в том, что изображения все еще отображаются с использованием тега img , так что обходной путь может быть применен (а затем удален удаленно, когда браузеры в конечном итоге исправлены), не затрагивая остальную часть приложения/веб-сайта.

Недостатком является создание дополнительного тега object для каждого изображения SVG.

Ответ 2

Это решение работает для меня при отображении встроенного SVG-изображения в Safari.

Ответ 3

Кажется, что ответ на этот вопрос работает: Что может сделать Safari пропустить клип-путь и маску с SVG?. См. Инструкции по ссылке из ответа.

Вам нужно воссоздать свой клип, чтобы сделать его видимым. А тег </clippath> не помещается после тега </image> .

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

Ответ 4

Так отметил Анто Юркович, есть некоторые известные проблемы с Safari и clipPath. То, что нравится Safari, - это если вы не определяете многоугольник, но вставьте его прямо в clippPath. Также вы должны отдельно группировать clipPath.

Но я все еще не мог получить svg для рендеринга изображения, если я использовал тег img для svg - <img src="https://utyatnishna.ru/info/544446/svg"/> . Поэтому в конце я вложил его так:

Я могу подтвердить, что это правильно отображается в мобильном сафари (на ipad и iphone, сафари для windows и сафари Mac - последние версии).

Итак, чтобы подвести итог. У меня есть этот svgs в отдельном html файле и рендеринг их при необходимости.

Ответ 5

Я столкнулся с этой проблемой, когда я использовал Ajax для загрузки svg spritesheet на страницу. Если бы у меня была страница на странице до того, как был загружен спрайт, она потерпит неудачу и не будет разрешаться после того, как спрайт будет доступен. Любое добавление в дом после загрузки спрайта было прекрасным. Мне пришлось откладывать предметы в доме до тех пор, пока после того, как спрайт закончил загрузку.

Это повлияло только на IOS. Все остальные браузеры не заботились о заказе.

Я пытаюсь добавить значок SVG в элемент заголовка h1:

Обновить

При тестировании в JSFiddle я получаю следующую ошибку:

Но в исходном URL-адресе такой проблемы нет, но значок по-прежнему не отображается.

Проблема в вашем родительском div: cta . Вы скрываете все внутри с помощью следующего CSS:

А затем переопределите стиль дочерних элементов cta , используя следующее:

Проблема в последней строке. Для shopping-cart svg внутри спрайта установлено значение display:none , поэтому вам просто нужно настроить таргетинг на него и всех его дочерних элементов, чтобы отобразить его.

Обновите ваш CSS до этого:

Теперь SVG виден, а ваши CTA-элементы по-прежнему скрыты:

Похоже, что правило стиля добавляет display: none; к элементу <use> .

Когда я отключаю это правило стиля, появляется SVG.

Кажется, какой-то CSS устанавливает display:none для значка на вашем веб-сайте. И в jsfiddle это не отображается, потому что это Замените свой код svg на это на своем веб-сайте. Это отлично работает: D.

Дело не в том, что <img> или <h1> не отображают svg. Это ваш svg на самом деле ничего не рисует.

В <svg> он определяет множество <symbol> . Они похожи на библиотеку ваших шаблонов. Вы определяете множество шаблонов в своей библиотеке, но никогда не выносите их на холст, чтобы показать их. Если открыть svg в браузере, ничего не отображается. Не потому, что display:none работает, но ему на самом деле нечего показать.

Я поместил зеленое png-изображение в качестве фона для div, и оно выглядит так:

Я использовал CSS-хак, чтобы текст оставался внутри зеленого фона. Итак, это мой HTML-код для этого раздела:

Теперь я хочу заменить png файлом svg, и единственное, что я изменил в CSS, - это расширение файла:

Но когда я просматриваю это в браузере, я больше не вижу фона:

Что я делаю неправильно? Вы можете увидеть демонстрационную страницу с фоновым изображением в формате png здесь.

Спасибо за вашу помощь.

РЕДАКТИРОВАТЬ: Здесь ссылка Dropbox на SVG файл.

4 ответа

Вероятно, вы уже это сделали, но я предлагаю абсолютно точно убедиться, что tech_bg.svg находится в каталоге, которым он должен быть (папка img), и что он написан точно так же, как и в текстовом редакторе, включая чувствительность к регистру имени файла и расширение файла. GitHub, безусловно, буквально учитывает регистр расширений, и у меня были проблемы с загрузкой файлов SVG по той же причине (.svg против .SVG).

Это было решение для OP, подробности см. в комментариях: . Следующий вопрос, который я задам, - как вы сделали SVG? Какое программное обеспечение вы использовали и уверены, что правильно сгенерировали его в Illustrator? Есть довольно специфический способ сделать это.

Попробуйте очистить кеш браузера и выполнить обновление один раз, а также попробуйте другие браузеры. Кроме того, если случайно вы используете IE8 и ниже или Android 2.3 и ниже, это определенно будет причиной.

На этот вопрос сложно дать окончательный ответ, поскольку мы не можем тестировать его с вами на вашем локальном компьютере, где и возникает несоответствие.

Не забудьте точки и / ---> ../ не фон ---> background-image: и не забудьте очистить историю браузера и деньги

Я знаю, что этот вопрос старый и решенный, но если у кого-то еще есть эта конкретная проблема (и этот вопрос хорошо размещен в Google): браузеры НЕ будут отображать svg, если веб-сервер передает его с неправильным заголовком типа содержимого. Если ваш веб-сервис возвращает «application / octet-stream» или «text / xml», изображение не будет работать должным образом, несмотря на то, что оно передано правильно и сам файл SVG в порядке.

Правильный медиотип для SVG - image/svg+xml

Иногда проблема не всегда связана с CSS. Попробуйте добавить следующую строку в свой .htaccess , чтобы сервер мог распознавать файлы svg из файла css ( background: url ("../ img / tech_bg.svg" ) no-repeat left top; ), вставьте эту строку:

Нет необходимости иметь столько правил, как указано выше, но это зависит от того, что вам нужно для формата, который вы хотели бы иметь на своем сайте, но для ответа на текущий вопрос здесь убедитесь, что в строке есть " svg " правило вашего файла .htaccess.

Читайте также: