2015-02-21 6 views
0

В этом проекте: https://test.restaurantacasa.cat/Bitmap в SVG не рендеринг в Safari

Я использую векторы, как рестораны логотипы. В некоторых из них, я включаю (встраивании в SVG) немного растрового изображения, для примера, здесь:

https://test.restaurantacasa.cat/#!/restaurant/el-campanar

enter image description here

Однако, если вы откроете, что один в Safari (мобильный или desktop), вы заметите, что раздел растрового изображения не отображается.

enter image description here

Можете ли вы помочь мне понять, почему?

Я создаю векторы с помощью Adobe Illustrator.

+0

Вы пытались использовать '', чтобы вставлять ваши SVG, а не ''. '' элементы не имеют одинаковых ограничений на внешние ссылки, которые '' делает. –

+0

@PaulLeBeau thanx. Я изучу это и вернусь к вам. – Birowsky

+0

@PaulLeBeau поставил свой комментарий в качестве ответа. Он должен быть отмечен как один. – Birowsky

ответ

1

Вы пытались использовать <object>, чтобы вставлять свои SVGs, а не <img>? <object> элементы не имеют одинаковых ограничений по внешним ссылкам, которые <img> делает.

1

This is a known bug with Safari. *

При использовании SVG как <img>, внешние файлы, такие как встроенные изображения не загружаются (в любом браузере). Чтобы обойти это ограничение, Illustrator преобразует внедренные изображения в значения URI данных, так что все данные для встроенного изображения сохраняются в файле SVG.

Для большинства браузеров этого достаточно. Однако Safari рассматривает значение URI данных так же, как и любой другой URL-адрес, ссылающийся на внешний файл, и не обрабатывает/не загружает его.


* Прокрутите вниз комментарии к связанному отчету об ошибке, потребовалось время, чтобы выяснить, в чем проблема! Основное обсуждение начинается с комментария 16.

0

У меня также была эта проблема, и я нашел решение, которое, как я думал, стоило размещать здесь.

Я встраивание SVG в качестве объекта:

<object data="path_to_file.svg" /> 

и объект включая изображение:

<image href="raster.png" /> 

Это работал везде, кроме Safari.Я узнал, что правильный синтаксис для использования заключается в следующем:

<image xlink:href="raster.png" /> 

Кроме того, если вы javascripting, это не достаточно просто setAttribute() вам нужно setAttributeNS() так:

el.setAttributeNS("http://www.w3.org/1999/xlink","href","raster.png") 

Кроме того, убедитесь, что включить XLINK NS в верхней части файла SVG в SVG тег:

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

(based on info I found here)

Смежные вопросы