Safari не может отображать изображение во вложенном SVG

Так что, учитывая этот HTML, фоновое изображение загружается только в Firefox, IE и Chrome. Но в Safari он просто игнорирует его.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="Content-Style-Type" content="text/css">
  <title></title>
</head>
<body>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 141.72999572753906 255.1199951171875">
    <image xlink:href="#" onclick="location.href='http://labels.labellogiclive.com/alfresco_10_p1_alf001_uk__v0.svg'; return false;" preserveAspectRatio="none" x="0" y="0" width="141.73" height="255.12"></image>
  </svg>
</body>
</html>

Теперь я подумал, что это может быть проблема с сервером, а не с правильными заголовками, но я проверил и хорошо выглядит (image/svg+xml). Так что я немного потерял... Любые идеи?

Ответ 1

Я отправил отчет об ошибке в Apple через Apple Bug Reporter с идентификатором ошибки 21959574. Надеюсь, кто-то из Apple примет к сведению и устранит основную проблему.

Ответ 2

Safari борется с глубоко вложенными элементами SVG <image>.

См., например, комментарии здесь: Вставить SVG в SVG?

Ваш первый <image> загружает другой SVG, который включает в себя <image>, который загружает фоновое фото. Если вы объединяете самый внутренний элемент <image> (фото) в самый внешний SVG, он отлично работает.