Svg图像元素未在Safari中显示

Question

Svg图像元素未在Safari中显示

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

<!DOCTYPE html>
<html>
<body>

<h1>My first SVG</h1>

<img src="image.svg" />

</body>
</html>

Run Code Online (Sandbox Code Playgroud)

这是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>

Run Code Online (Sandbox Code Playgroud)

是否有任何解决方案或解决方法可以在Safari中使用它？

Answer 1

Pat*_*wne 30

对我来说问题是我href在Chrome中使用该属性没有任何问题.要使它在Safari中正常工作,您需要使用xlink:href.请记住,xlink:href已弃用并正在替换href.但是,Safari尚不支持它.

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/href

这仍然是2018年5月30日的问题.svg中的图像标记需要xlink:href属性才能呈现最新版本的Safari.href自己的作品为chrome,firefox,edge,但不是safari.现在,我同时拥有href和xlink:href,它们都适用于所有浏览器. (2认同)
我现在同时使用 href 和 xlink:href，直到我找到不使用的理由。谁知道 xlink:href 支持什么时候会被取消？无论如何，OP 已经在使用 xlink:href。 (2认同)

Answer 2

tyi*_*ine 13

请务必为您的<svg>标签提供高度、宽度和视图框，如下所示。auto由于某种原因，Safari 不喜欢设置高度或宽度。\xe2\xa4\xb5\xef\xb8\x8e

\n

<svg height="16px" width="16px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M60......"></path></svg>\n

Run Code Online (Sandbox Code Playgroud)\n

这个为我解决了这个问题。 (3认同)

Answer 3

squ*_*age 11

我认为这里有两个问题:

您还没有说过您的SVG图像有多大.通常,您应该至少viewBox在<svg>标记中包含一个属性.例如:
```
<svg width="250" height="250" viewBox="0 0 250 250" ... >
```
Run Code Online (Sandbox Code Playgroud)
另一个问题是Safari在渲染SVG方面并不是特别出色.但是,当您使用<iframe>或<object>标记而不是使用它们时,它往往会做得更好<img>.例如:
```
<object data="image.svg" type="image/svg+xml"></object>
```
Run Code Online (Sandbox Code Playgroud)
此外,请确保您的服务器使用正确的MIME类型(Content-Type: image/svg+xml)提供SVG内容,因为这也会导致问题.

所以试一试:

HTML源代码:

<!DOCTYPE html>
<html>
<body>
<h1>My first SVG</h1>
<object data="image.svg" type="image/svg+xml"></object>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，11 月前
查看次数：	30811 次
最近记录：	7 年，5 月前