让透明的 SVG 在 IE 和 Safari 中都能工作？

发布于 2024-12-06 07:01:33 字数 547 浏览 1 评论 0原文

这对我来说似乎是一个非此即彼的问题。我可以让它们在其中之一中工作，但不能同时在两者中工作（无论我如何做，在 Firefox 中都可以正常工作）。

我已经阅读了很多关于这个主题的文章，除非 Safari 已经修复了这个问题，否则当 Safari 具有透明度并且您希望看到下面的其他元素时，纯外部 svg 似乎不受 Safari 支持并且无法正确渲染。。唯一的解决方案是将 svg 内联放入 html 中，效果很好。当然，要做到这一点，它必须是 IE 9 以下不支持的 xhtml。

如果我在这些方面有误，请纠正我，但我非常喜欢使用 SVG 及其功能，但只是今天我用 IE 和 Safari 再次测试了这些问题，使用了单个 SVG 数据块，它在 Firefox 中内联和外部工作，并且在外部时在 Safari 中不起作用，当然也不能在 IE 的 xhtml 中内联工作<=8。

鉴于上述情况，我看不到一种简单的方法来破解解决方案，而无需以完全不同的方式制作两个单独的网站。显然，最好的机会似乎在于让外部 svg 文件与 Safari 一起使用，有人知道我没有读过的任何技巧吗？关于这个主题似乎没有太多内容。

干杯

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

如若梦似彩虹 2024-12-13 07:01:33

此演示适用于 Safari/Chrome/FF/IE9。 SVG 在早期版本的 IE 中不起作用（嵌入或引用），因此它不会不在那里工作。

简而言之：

使您的文档以 XHTML 的形式使用
适当的命名空间直接将 SVG 嵌入其中。

<html xmlns="http://www.w3.org/1999/xhtml"><head>
  <meta http-equiv="content-type"
        content="application/xhtml+xml; charset=utf-8" />
  <title>Transparent SVG</title>
</head><body>
  <svg xmlns="http://www.w3.org/2000/svg">
    <!--
      this SVG will have a transparent background 
      and blend over any content below it.
    -->
  </svg>
</body></html>

This demo works on Safari/Chrome/FF/IE9. SVG does not work (embedded or referenced) in earlier versions of IE, so it won't work there.

In short:

Make your document served as XHTML
Embed SVG directly within it with the proper namespace.

<html xmlns="http://www.w3.org/1999/xhtml"><head>
  <meta http-equiv="content-type"
        content="application/xhtml+xml; charset=utf-8" />
  <title>Transparent SVG</title>
</head><body>
  <svg xmlns="http://www.w3.org/2000/svg">
    <!--
      this SVG will have a transparent background 
      and blend over any content below it.
    -->
  </svg>
</body></html>

回复收藏 0 原文

~没有更多了~