问题
I have the following file, image.svg, along with a file bitmap.png in the same spot on a server:
<?xml version="1.0" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100px" height="100px" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<image x="0" y="0" width="100px" height="100px"
xlink:href="bitmap.png" />
</svg>
When I go directly to the image file, it includes the bitmap.png image.
When I include the image in a webpage with an <object data="image.svg"></object> tag, the bitmap.png file loads.
When I include the image in a webpage with the <img src="image.svg" /> tag, the bitmap.png does not load.
What gives?
回答1:
The svg itself is valid.
Some browsers don't allow external references when an svg is referenced via <img>. What you can do to get it working is to convert the png to a data URI and put that there instead, see e.g this answer for how to do that.
来源：https://stackoverflow.com/questions/11352985/can-an-svg-included-in-html-with-an-img-tag-have-a-link-to-an-external-image-w