Тег SVG ‹image›, встроенный в HTML, не загружает изображение в браузере

Попытка загрузить изображение в SVG с помощью HTML-страницы:

<html>
...
<svg>
<image x="330" y="137" width="320" height="38" preserveAspectRatio="none" href="/img/title.png"></image>
</svg>
...
</html>

Все остальные элементы в svg загружаются (текст формирует пути), кроме изображения. Есть ли способ заставить это работать в браузерах? Я пробовал Chrome, Firefox, IE. Во всех браузерах отсутствует изображение.

Используя Chrome, я обнаружил, что Chrome даже не отправляет запрос на изображение. У меня есть подозрение, что это то же самое для IE и Firefox.

Любые решения?


svg html cross-browser
person Kenneth    schedule 10.07.2011    source источник

Ответы (2)


arrow_upward
15
arrow_downward

Вам нужно использовать:

<image ... xlink:href="...">

См. спецификацию структуры документа SVG.

person RichieHindle    schedule 10.07.2011
comment
Наряду с этим вам нужно, чтобы ваш документ обслуживался как XHTML и имел правильное пространство имен xlink, объявленное в элементе SVG: <svg ... xmlns:xlink="http://www.w3.org/1999/xlink">. - person Phrogz; 11.07.2011
comment
Кроме того, если вы создаете образ динамически, вам необходимо сделать следующее: svgImage.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'title.png'); - person Neil Fraser; 24.08.2011
comment
@NeilFraser Большое спасибо!!!! Ваш комментарий об использовании setAttributeNS вместо простого setAttribute для изображения был очень важен, и он помог мне решить эту проблему после ЧАСОВ и ЧАСОВ, когда я бился головой о том, почему изображение не отображается. Огромное спасибо. - person sathishpaul; 10.12.2016
comment
не могли бы вы взглянуть на этот вопрос, пожалуйста - person oldboy; 19.01.2019

arrow_upward
2
arrow_downward

Это не тот случай, о котором идет речь, но я столкнулся с похожей проблемой, когда тег <image href="/path/to/file.svg"> не отображался в Edge, хотя корректно работал в Firefox и Chrome.

Оказывается, если вы явно не установите атрибуты height и width в теге <image>, Edge не покажет изображение. Это не относится к Chrome и Firefox, где одного width было достаточно.

person Tommaso Amici    schedule 27.02.2020