Question

我有一个简单的svg示例，它只是包装了一个jpg。这是HTML：

<html>
<head>
</head>
<body>
    <div id="theimageholder">
        <img id="theimage" src="Images/simplepng.svg"></img>
    </div>
</body>
</html>

这是simplepng.svg的SVG：

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
         width="410" height="340"
         viewBox="0 0 200 200"
         zoomAndPan="enable"
         preserveAspectRatio="xMidYMin meet" >
<image x="0" y="0" width="200px" height="200px" xlink:href="earth.jpg"/>
</svg>

这适用于IE9，但不适用于Chrome或Firefox。它们都没有显示。 xlink：href在这些浏览器中有效吗？

Answer 1

SVG文件看起来100％正确： http://apike.ca/prog_svg_images.html

如果您将图片标记切换为嵌入或对象标记，它将起作用：

<embed src="Images/test.svg" type="image/svg+xml" width="410" height="340" />
<object data="Images/test.svg" type="image/svg+xml" width="410" height="340" />

这可能只是这些浏览器的限制。我确认这也是Safari中的一个问题。我无法找到参考或错误编号。

如何在svg中引用jpg？

1 个答案: