SVG с внешними изображениями не загружает их, если в браузерах есть тег <img>

Question

Я сделал следующее наблюдение:

Если я создаю изображение SVG, которое ссылается на внешнее растровое изображение с помощью xlink:href, и пытаюсь загрузить SVG в браузерах, внешние изображения отображаются только в том случае, если я использую тег <object>, но не при использовании <img> tag.

Рендеринг с тегом <object> довольно медленный и не такой чистый, как использование тега img для изображений, поэтому мне было интересно, есть ли способ заставить его работать через тег <img>.

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

Есть идеи?

Answer 1

Вы используете IE? IE все равно не распознает SVG. Microsoft всегда отстает на десять лет, но по какой-то причине они более популярны и намного дороже. Назовите марку пропаганды?

SVG загружается в Firefox. Как документ XML, на который есть ссылка непосредственно в URL, а также если вы встраиваете его в документ XHTML (полностью XML-совместимый) с правильным пространством имен, SVG должен отображаться правильно. Самое замечательное в этом варианте - DHTML может манипулировать вашим SVG. Все, что я сказал в этом параграфе, относится и к MathML, если вам интересно.

Кроме того, SVG не загружается из тега изображения. Я действительно верю, что Firefox работает над этим обновлением. Я не совсем уверен.

Использование объекта или тега внедрения разумно, я полагаю ... но одним из моих предыдущих исправлений было использование iframe. Вставьте iframe в ваш HTML, который ссылается на полный файл SVG. Используя CSS, вы можете заставить iframe выглядеть вровень с остальной частью вашего документа, выглядя и действуя как изображение Заключенный в тег div или span, вы можете иметь обработчики событий onhover и onclick.

Используя тег image, ваш src может быть файлом PHP на стороне сервера. При правильной кодировке и с соответствующими приложениями cgi вы можете растеризовать SVG на стороне сервера, и эти PNG-данные будут отправлены обратно на ваше изображение через PHP src.

Answer 2

Я думаю, что вы отстали как минимум на 10 месяцев ... IE9 поддерживает SVG, и предварительные версии (включая бета-версию) уже давно отсутствуют. Зайдите на www.ietestdrive.com, чтобы получить предварительный просмотр платформы - это очень хорошо. На мой взгляд, часть их поддержки SVG сейчас намного лучше, чем Firefox (но они пока не поддерживают SMIL).

Answer 3

Нет особой причины, по которой <object> должен загружаться медленнее, чем <img>, за исключением, возможно, аспекта взаимодействия (изображения статические, а объекты - полностью интерактивные документы). Изображения внутри svg должны загружаться в обоих сценариях, поэтому в браузере это звучит как ошибка.

Не могли бы вы опубликовать ссылку на ваш пример?