Getting transparent SVGs to work in both IE and Safari?_问答_开发者

Getting transparent SVGs to work in both IE and Safari?

开发者 https://www.devze.com 2023-04-06 19:56 出处：网络

This seems like an either or to me. I can get them to work in one or the other, but not both (while working fine in Firefox no matter how I do it).

I've been reading a lot on the subject, and unless it's already been fixed by Safari, it seems flat-out external svg is not supported by and does not render correctly in Safari when they have transparency and you want to see other elements underneath. The only solution for that is to put the svg inline in your html and it works fine. Of course to do that it has to be xhtml which isn't supported by less than IE 9.

Please correct me if I'm wrong on either of these counts, but I very much like using SVG and the power it has, yet just today I tested these problems again with IE and Safari, using a single chunk of SVG data, that works inline and externally in firefox, and will not work in Safari when external, and of course does not work inline in xhtml with IE <=8.

I can't see an easy way to hack a solution given the above without making two separate sites made in completely different ways. Obviously the best chance seems to lie with getting external svg files to work with Safari, does anyone know any tricks that I haven't read about? There doesn't 开发者_开发知识库seem to be much out there on the subject.

Cheers

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>