मैं एक बाहरी फ़ाइल (पेंट सर्वर) में परिभाषित एक एसवीजी रैखिक ढाल का संदर्भ क्यों नहीं दे सकता?</p> <p><a href="http://codepen.io/troywarr/pen/VYmbaa" rel="nofollow noreferrer">http://codepen.io/troywarr/pen/VYmbaa</a></p> <p>क्या मैं यहाँ कर रहा हूँ है:

Question

कृपया इस पेन पर एक नजर है

• एक एसवीजी प्रतीक (<symbol>)
• एक एसवीजी रेखीय ग्रेडिएंट को परिभाषित करने को परिभाषित (<linearGradient>)
• <use> तत्व का उपयोग करके एसवीजी प्रतीक को संदर्भित करने के लिए मैंने
बनाया है
• सीएसएस में परिभाषित दो वर्गों:
  • external, रेखीय ग्रेडिएंट this external .svg file में परिभाषित (राइट क्लिक करें और स्रोत देखें)
  • internal, रेखीय ग्रेडिएंट स्थानीय HTML में परिभाषित का संदर्भ जो संदर्भ देता है जो (जो मुझे विश्वास है, प्रभावी रूप से बाहरी फ़ाइल में एक)

के समान क्योंकि मैं नीचे ओ पर <svg> तत्व को internal वर्ग द्वारा लागू किए गए एफ एचटीएमएल उदाहरण, ढाल लागू किया गया है, एक नीली ढाल चेकमार्क प्रतिपादन। यही वह है जो मैं कर रहा हूं।

लेकिन, यदि आप एचटीएमएल उदाहरण में external करने के लिए internal वर्ग स्विच, सही का निशान नहीं दिखाई देगा:

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

जब मैं क्रोम निरीक्षक की "नेटवर्क" टैब देखते हैं, मैं नहीं दिख रहा है ब्राउज़र एसवीजी फ़ाइल को लोड करने की कोशिश कर रहा है। क्या मेरे वाक्यविन्यास में कोई समस्या है, या यहां कुछ और चल रहा है?

यह कम से कम लगता है जैसे मैं यह सही कर रहा हूँ, कुछ संदर्भ मैंने पाया पर आधारित

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

लेकिन , मैंने अभी तक जो भी प्रयास नहीं किया है, उसने मुझे बाहरीमें परिभाषित रैखिक ढाल का संदर्भ देने की अनुमति दी है 10 फाइल

किसी भी मदद के लिए धन्यवाद!

Answer 1

अधिक शोध के बाद, ऐसा लगता है कि यह ब्राउज़र समर्थन समस्या है। देखें:

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

दुख की बात है, मैं मेरा पोस्ट करने से पहले this question के पार चलो चाहते हैं, और यह है कि निश्चित रूप से सोचा था 5-1/2 वर्षों में, ब्राउज़र समर्थन पकड़ा है | ऊपर - लेकिन यह मामला प्रतीत नहीं होता है।

2015 तक, स्पष्ट रूप से फ़ायरफ़ॉक्स और ओपेरा किसी भी महत्वपूर्ण तरीके से इसका समर्थन करने के लिए केवल दो ब्राउज़र हैं।

ड्राइंग बोर्ड पर वापस ...

Answer 2

आप polyfill: true विकल्प के साथ svg4everybody उपयोग कर सकते हैं, यह use टैग के बजाय सभी बाहरी प्रतीकों को सम्मिलित होंगे। लेकिन यह दूसरी svg लोडिंग का कारण बन जाएगा।

तो आप एजेक्स अनुरोध का उपयोग करके svg डाउनलोड कर सकते हैं और फिर इसे शैलियों के साथ छिपाने वाले पेज पर डालें।

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

2016 से