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

пожалуйста, посмотрите на эту ручку:

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

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

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

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

но, если вы включите internal класс external в Примере HTML галочка больше не отображается:

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

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

это по крайней мере выглядит как будто я делаю это правильно, основываясь на несколько ссылок, которые я нашел:

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

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

8
gradient linear-gradients svg

2 ответов

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

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

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

назад к чертежной доске...

10

можно использовать 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 {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

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

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