Почему я не могу ссылаться на линейный градиент SVG, определенный во внешнем файле (сервер рисования)?

Пожалуйста, взгляните на это перо:

Что я здесь делаю:

определение символа SVG (<symbol>)
определение линейного градиента SVG (<linearGradient>)
с помощью элемента <use> для ссылки на созданный мной SVG-символ
в CSS, определяющем два класса:
- external, который ссылается на линейный градиент, определенный в этот внешний .svg файл (щелкните правой кнопкой мыши и просмотрите исходный код)
- internal, который ссылается на линейный градиент, определенный в локальном HTML (который, я считаю, фактически идентичен таковому во внешнем файле)

Поскольку я применил класс internal к элементу <svg> в нижней части примера HTML, применяется градиент, отображая галочку с синим градиентом. Это то, что я хочу.

Но если вы переключите класс internal на external в примере HTML, галочка больше не будет видна:

http://codepen.io/troywarr/pen/vEymKX

Когда я просматриваю вкладку Chrome Inspector "Сеть", я не вижу, как браузер пытается загрузить файл SVG. Есть ли проблема с моим синтаксисом или что-то еще происходит здесь?

По крайней мере, похоже, что я делаю это правильно, опираясь на несколько ссылок, которые я нашел:

Но ничего, что я пробовал до сих пор, не позволял мне ссылаться на линейный градиент, определенный во внешнем файле .svg.

Спасибо за любую помощь!

Ответ 1

После дополнительных исследований похоже, что это проблема поддержки браузера. См:

К сожалению, я столкнулся с этим вопросом, прежде чем публиковать мои сообщения, и подумал, что через 5-1/2 года поддержка браузеров будет догнана - но это, похоже, не так.

По состоянию на 2015 год, по-видимому, Firefox и Opera являются единственными двумя браузерами, которые поддерживают это каким-либо существенным образом.

Вернуться к чертежной доске...

Ответ 2

Вы можете использовать svg4everybody с опцией polyfill: true, он будет вставлять все внешние символы вместо тегов use. Но это приведет к второй загрузке svg.

Итак, вы можете скачать svg с помощью ajax-запроса, а затем вставить его на страницу, скрывающуюся со стилями.

<script>var ajax=new XMLHttpRequest;ajax.open("GET","/img/svg-sprite.svg",!0),ajax.send(),ajax.onload=function(a){var b=document.createElement("div");b.classList.add("hidden"),b.innerHTML=ajax.responseText,document.body.insertBefore(b,document.body.childNodes[0])};</script>

В этом случае:

/img/svg-sprite.svg - это ваш путь svg.

.hidden стили классов:

.hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

И ваш код может выглядеть так:

<svg><use xlink:href="#logo"></use></svg>