एम्बेडेड एसवीजी में शैली कैसे लागू करें?

Question

जब एक एसवीजी सीधे <svg> टैग का उपयोग कर दस्तावेज़ में शामिल किया गया है, तो आप दस्तावेज़ की स्टाइलशीट के माध्यम से एसवीजी में सीएसएस शैलियों को लागू कर सकते हैं। हालांकि, मैं एक एसवीजी को एक शैली लागू करने की कोशिश कर रहा हूं जो एम्बेडेड है (<object> टैग का उपयोग करके)।

क्या निम्न कोड जैसे कुछ भी उपयोग करना संभव है?

object svg { 
    fill: #fff; 
} 

Answer 1

संक्षिप्त उत्तर: नहीं, क्योंकि शैलियों दस्तावेज़ सीमाओं में लागू नहीं होती हैं।

हालांकि, चूंकि आपके पास <object> टैग है, इसलिए आप स्क्रिप्ट का उपयोग करके svg दस्तावेज़ में स्टाइलशीट डाल सकते हैं।

इस तरह कुछ है, और ध्यान दें कि यह कोड मानता है कि कि <object> पूरी तरह से भरी हुई है:

var svgDoc = yourObjectElement.contentDocument; 
var styleElement = svgDoc.createElementNS("http://www.w3.org/2000/svg", "style"); 
styleElement.textContent = "svg { fill: #fff }"; // add whatever you need here 
svgDoc.getElementById("where-to-insert").appendChild(styleElement); 

यह बाहरी शैलीपत्रक संदर्भ के लिए एक <link> तत्व सम्मिलित करने के लिए संभव भी है:

var svgDoc = yourObjectElement.contentDocument; 
var linkElm = svgDoc.createElementNS("http://www.w3.org/1999/xhtml", "link"); 
linkElm.setAttribute("href", "my-style.css"); 
linkElm.setAttribute("type", "text/css"); 
linkElm.setAttribute("rel", "stylesheet"); 
svgDoc.getElementById("where-to-insert").appendChild(linkElm); 

फिर भी एक और विकल्प शैली विधि डालने के लिए, पहली विधि का उपयोग करना है, और उसके बाद एक @import नियम जोड़ें, उदाहरण के लिए styleElement.textContent = "@import url(my-style.css)"।

बेशक आप किसी भी स्क्रिप्टिंग के बिना भी svg फ़ाइल से स्टाइलशीट से सीधे लिंक कर सकते हैं। निम्न में से कोई काम करना चाहिए:

<?xml version="1.0" encoding="UTF-8"?> 
<?xml-stylesheet href="my-style.css" type="text/css"?> 
<svg xmlns="http://www.w3.org/2000/svg"> 
    ... rest of document here ... 
</svg> 

या:

<svg xmlns="http://www.w3.org/2000/svg"> 
    <defs> 
    <link href="my-style.css" type="text/css" rel="stylesheet" 
      xmlns="http://www.w3.org/1999/xhtml"/> 
    </defs> 
    ... rest of document here ... 
</svg> 

अद्यतन 2015: आप jquery-svg प्लगइन का उपयोग कर सकते हैं के लिए एक एम्बेडेड एसवीजी के लिए js स्क्रिप्ट और सीएसएस शैलियों लागू होते हैं।

Answer 2

आप इसे एसवीजी फ़ाइल के अंदर अपनी शैलियों के साथ शैली ब्लॉक डालकर javsscrpt के बिना ऐसा कर सकते हैं।

<style type="text/css"> 
path, 
circle, 
polygon { 
    fill: #fff; 
    } 
</style>