SVG图像元素未在Safari中显示 [英] Svg image element not displaying in Safari
问题描述
Safari浏览器(我正在Windows下进行测试)似乎在显示Svg图像元素时出现问题.
Safari browser (I'm testing under windows) seems having problem in displaying Svg Image element.
<!DOCTYPE html>
<html>
<body>
<h1>My first SVG</h1>
<img src="image.svg" />
</body>
</html>
这是image.svg的内容:
And here is the content of the image.svg:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="50" y="50" width="100" height="100" style="fill:blue"></rect>
<rect id="foo" x="50" y="150" width="500" height="500" style="fill:green"></rect>
<image x="50" y="10" width="200" height="200" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="></image>
</svg>
是否有解决方案或变通办法可以在Safari中使之正常工作?
Is there any solution or workaround to make this work in Safari?
推荐答案
我认为这里有两个问题:
I think there are two problems here:
-
关于SVG图像的大小，您什么也没说.通常，您应该至少在
<svg>标记中包含viewBox属性.例如:
You haven't said anything about how large your SVG image is. As a rule, you should at least include a
viewBoxattribute in the<svg>tag. For example:
<svg width="250" height="250" viewBox="0 0 250 250" ... >
另一个问题是Safari在呈现SVG方面并不是特别出色.但是，当您使用<iframe>或<object>标记而不是使用<img>嵌入它们时，这样做往往会更好.例如:
The other problem is that Safari isn't particularly brilliant at rendering SVGs. However, it tends to do better when you embed them with an <iframe> or <object> tag instead of using <img>. For example:
<object data="image.svg" type="image/svg+xml"></object>
此外，请确保您的服务器以正确的MIME类型(Content-Type: image/svg+xml)传递SVG内容，因为这也会引起问题.
Also, make sure your server is delivering SVG content with the correct MIME type (Content-Type: image/svg+xml), as this can cause problems too.
因此，请尝试一下:
So give this a try:
HTML来源:
<!DOCTYPE html>
<html>
<body>
<h1>My first SVG</h1>
<object data="image.svg" type="image/svg+xml"></object>
</body>
</html>
image.svg:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="250" height="250" viewBox="0 0 250 250"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="50" y="50" width="100" height="100" style="fill:blue"></rect>
<rect id="foo" x="50" y="150" width="500" height="500" style="fill:green"></rect>
<image x="50" y="10" width="200" height="200" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="></image>
</svg>
这篇关于SVG图像元素未在Safari中显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
