SVG Data URI не отображается в теге img

У меня есть строка Data URI в кодировке Base64, которую я получаю из Kendo. Drawing.exportSVG из карты кендо.

Если я помещу строку Base64 в декодер SVG, а затем сохраню полученный SVG в файл и открою его в браузере, изображение будет отображаться нормально, но если я помещу его в тег <img>, ничего не отобразится.

Строка Base64 довольно большая, поэтому я поместил ее в JsFiddle, чтобы продемонстрировать, а не вставлять сюда.

https://jsfiddle.net/qmap5sg9/

Кто-нибудь может подсказать, почему изображение не загружается?


svg image html base64 data-uri
person Steve    schedule 26.04.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

URL-адрес ваших данных состоит из множества ссылок на внешние изображения, такие как

<image preserveAspectRatio="none" x="310.15625" y="281" width="256px" height="256px" xlink:href="http://ecn.t0.tiles.virtualearth.net/tiles/r311213001300102.jpeg?g=5171&amp;mkt=en-US&amp;shading=hill" clip-path="url(#kdef7)" />

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

person Robert Longson    schedule 26.04.2016
comment
Вы имеете в виду кодировать каждое из изображений, содержащихся в SVG? - person Steve; 26.04.2016
comment
Хмм хорошо. Я думаю, именно поэтому метод ExportImage дает данные URI намного длиннее, должно быть, он делает это для меня. - person Steve; 26.04.2016