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

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

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

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

  • определение символа SVG ( )
  • определяя линейный gradleиент SVG ( )
  • используя элемент для ссылки на символ SVG, который я создал
  • в CSS, определяя два classа:
    • external , который ссылается на линейный gradleиент, определенный в этом внешнем файле .svg (правый щелчок и просмотр источника)
    • internal , который ссылается на линейный gradleиент, определенный в локальном HTML (который, я считаю, фактически идентичен тому, который находится во внешнем файле)

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

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

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

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

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

  • http://www.w3.org/TR/SVG/painting.html#SpecifyingPaint
  • http://www.w3.org/TR/SVG/linking.html#IRIReference
  • https://stackoverflow.com/a/7118142/167911

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

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

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

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

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

    Вернуться к доске для рисования…

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

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

      

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

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

    .hidden стилей classа:

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

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

      
    Давайте будем гением компьютера.