Получение прозрачных SVG для работы в IE и Safari? - PullRequest
Новая
       23

Получение прозрачных SVG для работы в IE и Safari?

1 голос
/ 22 сентября 2011

Мне это кажется или.Я могу заставить их работать в одном или другом, но не в обоих (хотя в Firefox работает нормально, как бы я это ни делал).

Я много читал на эту тему, и если Safari не исправил это, кажется, что внешний svg не поддерживается и не отображается правильно в Safari, когда у них есть прозрачность и выхочу увидеть другие элементы внизу.Единственное решение для этого заключается в том, чтобы вставить svg inline в ваш html, и он отлично работает.Конечно, для этого должен быть xhtml, который не поддерживается менее чем в IE 9.

Пожалуйста, исправьте меня, если я ошибаюсь по любому из этих показателей, но мне очень нравится использовать SVG иу него есть мощь, но только сегодня я снова проверил эти проблемы с IE и Safari, используя один фрагмент данных SVG, который работает как внутри, так и снаружи в Firefox, и не будет работать в Safari, когда внешний, и, конечно, не работает вHTML с IE <= 8.</p>

Я не вижу простого способа взломать решение с учетом вышесказанного, не создавая два отдельных сайта совершенно разными способами.Очевидно, что лучший шанс заключается в том, чтобы заставить внешние svg-файлы работать с Safari. Кто-нибудь знает какие-нибудь хитрости, о которых я не читал?Там, кажется, не так много на эту тему.

Приветствия

1 Ответ

3 голосов
/ 22 сентября 2011

Эта демонстрация работает в 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>
...