Svg 图像元素未在 Safari 中显示 [英] Svg image element not displaying in Safari

查看：66
本文介绍了Svg 图像元素未在 Safari 中显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

Safari 浏览器(我在 windows 下测试)在显示 Svg Image 元素时似乎有问题.

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:

  1. 您还没有说明您的 SVG 图像有多大.通常，您至少应该在 标签中包含一个 viewBox 属性.例如:

  1. You haven't said anything about how large your SVG image is. As a rule, you should at least include a viewBox attribute in the <svg> tag. For example:

<svg width="250" height="250" viewBox="0 0 250 250" ... >

  • 另一个问题是 Safari 在渲染 SVG 方面并不是特别出色.但是，当您使用