问题
I have a Data URI Base64 encoded string I am obtaining from the Kendo.drawing.exportSVG method from a Kendo Map.
If I put the Base64 string into an SVG decoder, then save the resulting SVG to a file and open it in a browser the image displays fine, but if I put it into an <img> tag, nothing is displayed.
The Base64 string is quite large, so I've put it in a JsFiddle to demonstrate rather than pasting it here.
https://jsfiddle.net/qmap5sg9/
Can anyone advise why the image isn't loading?
回答1:
Your data URL consists of a lot of references to external images such as
<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&mkt=en-US&shading=hill" clip-path="url(#kdef7)" />
When used as an image, in your case via an image tag the SVG must consist of a single file so you'll have to encode each of those images as data URLs and then once you've done that re-encode the whole SVG file as a data URL.
来源：https://stackoverflow.com/questions/36856689/svg-data-uri-doesnt-render-in-img-tag