Dlaczego nie mogę odwołać się do liniowego gradientu SVG zdefiniowanego w zewnętrznym pliku (serwer malowania)?

Question

Proszę spojrzeć na tego pióra:

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

Co robię tutaj jest:

• definiując symbol SVG (<symbol>)
• definiowania gradientu liniowego SVG (<linearGradient>)
• za pomocą elementu <use> w celu odniesienia do symbolu SVG, który utworzyłem:
• w CSS, definiujące dwie klasy:
  • external, który odwołuje się do gradientu liniowego zdefiniowany w this external .svg file (prawy przycisk myszy i źródłowy)
  • internal, która odwołuje się gradient liniowy określony w miejscowym HTML (które jest wierzę, skutecznie identyczny jak w pliku zewnętrznym)

Bo ja zastosowano klasę internal do elementu <svg> na dole o W przykładzie HTML zastosowano gradient, wyświetlając niebieski znacznik wyboru gradientu. Właśnie tego szukam.

Ale jeśli przełączyć klasę internal do external na przykład HTML, zaznaczenie nie jest już widoczny:

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

Kiedy oglądam kartę Chrome inspektora „Network”, nie widzę przeglądarka próbuje załadować plik SVG w ogóle. Czy jest jakiś problem z moją składnią, czy coś tu się dzieje?

To przynajmniej wygląda jak robię to prawo, na podstawie kilku odnośnikach znalazłem:

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

Ale , nic, co do tej pory próbowałem, nie pozwoliło mi odnieść się do gradientu liniowego zdefiniowanego w zewnętrznym .svg plików.

Dzięki za pomoc!

Answer 1

Po dalszych badaniach wygląda na to, że jest to problem z obsługą przeglądarki. Zobacz:

• https://code.google.com/p/chromium/issues/detail?id=109212
• https://bugs.webkit.org/show_bug.cgi?id=105904

Niestety, chciałbym natknąć this question przed wysłaniem do mnie, i pomyślałem, że pewnie w 5-1/2 lat, obsługa przeglądarki byłby złapany w górę - ale wydaje się, że tak nie jest.

Wygląda na to, że od roku 2015 Firefox i Opera są jedynymi przeglądarkami obsługującymi to w jakikolwiek znaczący sposób.

Powrót do deski kreślarskiej ...

Answer 2

Można użyć svg4everybody z polyfill: true opcji, to włóż wszystkie symbole zewnętrzne zamiast use tagów. Ale spowoduje to załadowanie drugiego svg.

Możesz pobrać svg za pomocą żądania ajax, a następnie wstawić je na stronie ukrytej za pomocą stylów.

<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> 

W tym przypadku:

/img/svg-sprite.svg - to ścieżka SVG.

.hidden klasy style:

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

a kod może wyglądać następująco:

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