Inline SVG не отображается в Safari

Question

У меня есть SVG логотипа, который я сделал в Illustrator, и оптимизирован с помощью SVGOu. Я использую Gif как заполнение. Он работает без проблем в Chrome. У меня была икота в Firefox, но я нашел исправление после того, как выяснил, что Firefox является более придирчивым, чем Chrome при определении атрибутов SVG. Firefox по-прежнему действует strangley после прокрутки. Гиф останавливается. Моя проблема теперь в Safari. Встроенный SVG просто не отображается. Проверка CanIUse, поддерживается.

Я попытался добавить

<meta http-equiv="Content-Type" content="application/xhtml+xml"> 

к головке моего файла index.html. Не повезло. Мой dev-сервер работает с Apache, а мой локальный - NodeJS. Перед тем, как играть с MIME-типами, я хотел посмотреть, есть ли у кого-то другое рабочее решение.

Вот мой Инлайн код SVG:

  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="qfLogoSVG" viewBox="-146 372.5 302.1 49.5"> 
     <style type="text/css"> 
      .qfSvg { 
      width:100%; 
      fill:url('#qfPattern'); 
      } 
     </style> 
     <pattern id="qfPattern" 
       patternUnits="userSpaceOnUse" 
       height="100%" 
       width="100%" 
       x="1071" 
       y="174" 
       preserveAspectRatio="xMidYMid slice" 
       viewBox="0 0 1 1"> 

       <image xlink:href="" 
         width="1" 
         height="1" 
         id="qfImg"/> 
     </pattern> 
     <g id="qfSvg" class="qfSvg"> 
      <path d="M15.1 394.7H9.2v-3.3h5.9v-9.3c0-1.9.3-3.4.8-4.6.6-1.2 1.2-2.2 2.1-2.9.8-.7 1.7-1.3 2.8-1.6 1-.3 2-.5 2.9-.5 1.7 0 3.2.2 4.3.7l-.8 3.3c-.8-.4-1.9-.6-3.3-.6-3.3 0-5 2.5-5 7.6v8h6.7v3.3h-6.7V420h-3.7l-.1-25.3zm16.2 4.7c0-.5 0-1.2-.1-1.9 0-.8-.1-1.5-.1-2.3 0-.8-.1-1.5-.1-2.2s-.1-1.2-.1-1.6h3.7c0 1.1.1 2.1.1 3.1s.1 1.6.2 1.9c.9-1.7 2.2-3.1 3.7-4.1 1.5-1.1 3.3-1.6 5.4-1.6.4 0 .7 0 1.1.1.4.1.7.1 1.1.2l-.4 3.6c-.5-.2-1-.2-1.4-.2-1.6 0-3 .3-4.2.8s-2.1 1.2-2.9 2.1c-.8.9-1.3 2-1.7 3.2s-.6 2.5-.6 3.9V420h-3.7v-20.6zm40 8.5v3.8c0 1.1.1 2.1.1 3.1 0 .9.1 1.8.2 2.7.1.8.2 1.6.3 2.5h-3.5c-.2-1.4-.4-2.9-.4-4.6h-.1c-1.1 1.9-2.4 3.2-4 4.1s-3.6 1.3-6 1.3c-1.2 0-2.5-.2-3.7-.5-1.2-.3-2.3-.8-3.2-1.5-1-.7-1.7-1.6-2.3-2.6-.6-1.1-.9-2.4-.9-3.9 0-2.2.6-3.9 1.7-5.2 1.1-1.3 2.5-2.2 4.1-2.9 1.6-.6 3.4-1 5.2-1.2s3.5-.3 4.9-.3H68V401c0-2.5-.8-4.2-2.3-5.3-1.5-1.1-3.4-1.6-5.8-1.6-3.3 0-6.2 1.1-8.7 3.2l-2.2-2.5c1.4-1.3 3.1-2.3 5.1-3 2-.7 4-1 5.8-1 3.5 0 6.2.8 8.3 2.4 2.1 1.6 3.1 4.2 3.1 7.9v6.8zm-7.4-2.3c-1.6 0-3.1.1-4.6.3-1.5.2-2.8.6-4 1-1.2.5-2.1 1.2-2.8 2-.7.8-1.1 1.9-1.1 3.1 0 .9.2 1.6.6 2.3.4.7.9 1.2 1.5 1.7.6.4 1.3.8 2.1 1s1.5.3 2.3.3c2 0 3.6-.3 4.9-.9 1.3-.6 2.3-1.3 3.1-2.3.8-.9 1.3-2 1.6-3.1.3-1.2.4-2.4.4-3.5v-1.9h-4zm12.8-6.2c0-.5 0-1.2-.1-1.9 0-.8-.1-1.5-.1-2.3 0-.8-.1-1.5-.1-2.2s-.1-1.2-.1-1.6H80c0 1.1.1 2.1.1 3.1s.1 1.6.2 1.9h.2c.7-1.6 2-2.9 3.7-4s3.8-1.7 6.1-1.7c1.9 0 3.6.5 5.2 1.5s2.7 2.5 3.4 4.7c.9-2.1 2.3-3.7 4.1-4.7s3.7-1.5 5.7-1.5c2.2 0 4 .4 5.4 1 1.4.7 2.5 1.6 3.3 2.7s1.4 2.4 1.7 3.9c.3 1.5.5 3 .5 4.6v17h-3.7v-16.8c0-1.2-.1-2.3-.3-3.4-.2-1.1-.6-2.1-1.1-2.9-.5-.9-1.2-1.6-2.2-2.1-.9-.5-2.1-.8-3.6-.8-1.7 0-3.2.3-4.3 1-1.1.6-2 1.5-2.6 2.4-.6 1-1.1 2.1-1.4 3.2-.3 1.2-.4 2.2-.4 3.3v16h-3.7v-17.1c0-2.6-.5-4.8-1.5-6.4-1-1.6-2.5-2.4-4.5-2.4-1.4 0-2.7.2-3.9.7s-2.3 1.2-3.2 2.2-1.6 2.2-2.1 3.6c-.5 1.5-.8 3.2-.8 5.2v14.3h-3.7v-20.5h.1zm74.3 15.1c-1.4 2.2-3.2 3.7-5.4 4.7-2.1.9-4.5 1.4-7 1.4-2.2 0-4.2-.4-5.9-1.1-1.8-.7-3.3-1.8-4.6-3.1-1.3-1.3-2.3-2.9-2.9-4.8-.7-1.8-1-3.9-1-6.1 0-2.1.4-4.1 1.1-5.9s1.7-3.4 3-4.7c1.3-1.3 2.8-2.4 4.5-3.1 1.7-.8 3.7-1.1 5.8-1.1 2.2 0 4.1.4 5.8 1.1 1.7.8 3.1 1.8 4.2 3 1.1 1.3 2 2.7 2.6 4.3s.9 3.2.9 4.9v2.6h-24c0 .8.2 1.8.5 3s.9 2.4 1.7 3.5c.8 1.2 1.9 2.1 3.3 3 1.4.8 3.2 1.2 5.4 1.2 1.9 0 3.7-.5 5.5-1.4 1.8-.9 3.1-2.1 4.1-3.7l2.4 2.3zm-2.8-11.3c0-1.3-.3-2.5-.8-3.6s-1.2-2.1-2.1-2.9c-.9-.8-1.9-1.5-3.2-2-1.2-.5-2.5-.7-3.9-.7-2 0-3.7.4-5 1.2-1.3.8-2.4 1.8-3.2 2.8-.8 1.1-1.3 2.1-1.7 3.1-.3 1-.5 1.7-.5 2.1h20.4zm-244.3 16.7h-25.2c-3.1 0-6-.6-8.8-1.7-2.8-1.1-5.2-2.7-7.2-4.6-2.1-2-3.7-4.3-4.9-7.1-1.2-2.7-1.8-5.7-1.8-9 0-3.2.6-6.2 1.7-8.9s2.7-5.1 4.8-7.1c2-2 4.4-3.6 7.2-4.7 2.7-1.1 5.7-1.7 8.9-1.7 3.1 0 6 .6 8.7 1.7 2.7 1.1 5.1 2.6 7.1 4.6s3.6 4.3 4.8 6.9c1.2 2.7 1.8 5.5 1.8 8.7 0 1.9-.2 3.7-.7 5.5s-1.1 3.5-1.9 5c-.8 1.6-1.9 3-3.2 4.2-1.3 1.2-2.7 2.2-4.3 3v.1h13v5.1zm-25.5-5.6c2.4 0 4.6-.4 6.6-1.3s3.7-2.1 5.1-3.6 2.5-3.4 3.3-5.5c.8-2.1 1.2-4.3 1.2-6.7 0-2.3-.4-4.5-1.2-6.5-.8-2-1.9-3.8-3.4-5.2-1.4-1.5-3.2-2.7-5.1-3.5-2-.9-4.1-1.3-6.5-1.3-2.3 0-4.4.4-6.4 1.3s-3.7 2-5.1 3.5c-1.4 1.5-2.6 3.2-3.4 5.2-.8 2-1.2 4.1-1.2 6.4 0 2.4.4 4.6 1.2 6.7.8 2.1 1.9 3.9 3.3 5.5s3.1 2.8 5.1 3.7c1.9.9 4.1 1.3 6.5 1.3zm53.9 5.6h-5.6v-4.5h-.1c-.7 1.6-1.9 2.8-3.7 3.8-1.7 1-3.7 1.5-6 1.5-1.4 0-2.8-.2-4.1-.6s-2.4-1.1-3.4-2-1.7-2.1-2.3-3.5c-.6-1.4-.9-3.1-.9-5v-19h5.6v17.3c0 1.4.2 2.5.6 3.5.4 1 .9 1.7 1.5 2.3.6.6 1.3 1 2.1 1.3.8.3 1.6.4 2.5.4 1.2 0 2.2-.2 3.2-.6 1-.4 1.9-1 2.6-1.8s1.3-1.8 1.7-3.1c.4-1.2.6-2.7.6-4.4v-14.9h5.6v29.3h.1zm5.1-39.7c0-1.1.4-2.1 1.2-2.9.8-.8 1.8-1.2 2.9-1.2s2.1.4 2.9 1.2c.8.8 1.2 1.8 1.2 2.9 0 1.1-.4 2.1-1.2 2.9-.8.8-1.8 1.2-2.9 1.2s-2.1-.4-2.9-1.2c-.8-.9-1.2-1.8-1.2-2.9zm1.3 10.4h5.6v29.3h-5.6v-29.3zm32.7 7.8c-1-1.1-2.1-1.9-3.3-2.4-1.1-.6-2.5-.8-4.1-.8-1.5 0-2.9.3-4 .8-1.1.6-2.1 1.3-2.8 2.3-.8 1-1.3 2.1-1.7 3.3-.4 1.3-.6 2.6-.6 3.9 0 1.4.2 2.6.7 3.9.5 1.2 1.1 2.3 1.9 3.2s1.8 1.6 3 2.1 2.5.8 3.9.8c1.6 0 2.9-.3 4-.8 1.1-.6 2.1-1.4 3.1-2.4l4 4c-1.4 1.6-3.1 2.8-5 3.5-1.9.7-4 1-6.1 1-2.3 0-4.3-.4-6.2-1.1-1.9-.7-3.5-1.8-4.9-3.1-1.4-1.3-2.4-2.9-3.2-4.8-.7-1.9-1.1-3.9-1.1-6.2 0-2.3.4-4.3 1.1-6.2s1.8-3.5 3.1-4.9c1.3-1.4 3-2.4 4.8-3.2 1.9-.8 4-1.1 6.3-1.1 2.1 0 4.2.4 6.2 1.1 2 .8 3.7 1.9 5.1 3.5l-4.2 3.6zm8.4-25.2h5.6v30.1L-2 390.7h7.7L-8 404l14.9 15.9H-1l-13.6-15.2v15.2h-5.6v-46.7z M-124.2 404.5c-.6 0-1-.5-1-1.2v-11.5c0-.8.5-1.2 1-1.2.2 0 .5.1.7.2l9.9 5.7c.4.2.7.6.7 1s-.2.8-.7 1l-9.9 5.7c-.2.2-.5.3-.7.3z"/> 
     </g> 
     </svg> 

Вот ссылка на домашнюю страницу, где отображается Инлайн SVG (Примечание: Это логотип)

Link Here

EDIT: XLink: href пуста, потому что я пытаюсь работать с использованием следующих JS

(function(){ 
     var svgElem = document.querySelector('#qfPattern image'); 
     setTimeout(svgElem.setAttributeNS('http://www.w3.org/1999/xlink','href', 'https://s3.amazonaws.com/quickframe-static/img/logoAnimation.gif'),10); 
    })(); 

В настоящее время встроенный SVG появляется во всех браузерах. Тем не менее, он только правильно проецирует GIF на Chrome. Firefox по-прежнему зависает после прокрутки страницы, но может начать резервное копирование, если выделить элемент мышью. Safari, GIF полностью заморожен.

Answer 1

У вас, похоже, есть вложенная разметка для копирования. Внутренняя часть <path недействительна, так как это, по-видимому, ваша проблема.

<path class="qfSvg" 
        <path