svg - 在 webkit 浏览器中使用标签时，带有嵌入位图的 SVG 不显示位图

Question

我正在尝试使用带有嵌入式位图的 SVG 作为导航元素。这个想法是让它对移动设备更友好。我已经为 IE8 及更低版本准备了 PNG 后备。

不知何故，嵌入式位图不会显示在基于 webkit 的浏览器中。没有嵌入位图的 SVG 显示就好了。

我可以使用“对象”标签让背景在 webkit 中显示，但是我的链接不起作用，我无法控制宽度，并且我遇到了一个记录在案的 safari 错误，其中图像未缩放并且出现滑块。

请参阅此处的相关页面： http ://www.izbornareforma.rs/izbori-2012/ 所有图像都是 SVG，底部的四个图像中嵌入了位图。

有许多类似的问题，但没有一个可行的解决方案。

欢迎提出建议。

广东

score 3 · Accepted Answer

这是 Webkit 中的一个错误。如果您保留当前背景并在标签中加载相同object的 SVG，您将看到 SVG 背景将正确加载嵌入数据。为了解决这个问题，我建议你创建一个不可见的div地方，在标签中加载你的 SVG object，例如......

<div id="svgfix">
  <object ... />
  <object ... />
  <object ... />
  <object ... />
</div>

你的 CSS：

#svgfix {
  width: 0; 
  height: 0; 
  position: absolute;
  visibility: hidden;
}

score 0 · Accepted Answer

0

相应的Webkit 错误已在 Safari 9 中修复并推出。

于 2018-03-16T03:27:02.930 回答

2 回答 2