img Внутри foreignObject Внутри svg Внутри img

Question

Вот мой тестовый пример.

http://tobeythorn.com/isi/dummy2.svg

http://tobeythorn.com/isi/isitest.html

• Если я просто открыть SVG сам по себе, внутренний IMG оказывается в порядке.

• Но когда я делаю это svg src img, внутренний img не отображается. Я не получаю ошибок.

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

• То же самое происходит в FF, Chrome, Opera и Safari.

Я не могу найти решение, но, возможно, связано: foreignObject inside second SVG element for Chrome

вопрос Перекрестная происхождения?

Ограничение спецификации?

Ошибка браузера?

Answer 1

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

Значит, вам нужно сделать base64 encode изображение и вставить его в SVG как data URL, чтобы заставить его работать.

Answer 2

Я не вижу ваш пример, но если вы используете JS для добавления html-элемента в svg, вы должны помнить, используя префикс, чтобы сообщить браузеру, что этот элемент является svg или html.

Например, если вы добавите в HTML IMG элемент:

$('svg').append('svg:foreignObject').append('xhtml:img').attr('src','./foo.jpg');