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

107

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

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

object svg { 
    fill: #fff; 
}

html css svg

— यहोशू Sortino
स्रोत

मैं यह करने के लिए एक हल्के तरीके से आया था जो कि आप जो करने की कोशिश कर रहे हैं उसके लिए बहुत अच्छा होगा। इसे देखें Q & A: stackoverflow.com/questions/11978995/…

— ड्रू बेकर

यहाँ एक जवाब है कि वास्तव में काम हो जाता है ( सीएसएस के साथ बाहरी svg फ़ाइल शैली गुणों को

— जोड़ते हुए

जवाबों:

108

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

हालाँकि, चूंकि आपके पास एक <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>

अद्यतन २०१५: आप एक एम्बेडेड SVG में js स्क्रिप्ट और css स्टाइल लागू करने के लिए jquery-svg प्लगइन का उपयोग कर सकते हैं ।

— एरिक डहलस्ट्रम
स्रोत

क्या यह एक बाहरी स्टाइलशीट को लिंक करने की विधि है? यदि नहीं, तो क्या यह संभव है?

— जोशुआ Sortino

ऊपर एक शैली तत्व को svg में सम्मिलित करता है। हाँ यह एक एक्सएचटीएमएल लिंक तत्व को बाहरी स्टाइलशीट से जोड़ने के लिए भी संभव है, या संभवतः एक एक्सएमएल-स्टाइलशीट प्रोसेसिंग इंस्ट्रक्शन ( w3.org/Style/styling-XML.html देखें )।

— एरिक डाहलस्ट्रॉम

यह बहुत बढ़िया एरिक है! हालाँकि, मैं svgweb: code.google.com/p/svgweb सहित Chrome में काम करने के लिए इस ट्रिक को प्राप्त करने का प्रबंधन नहीं कर सका ... किसी भी विचार का क्या मैं गलत कर रहा हूं?

— मैट डब्ल्यूडी

@ मैट-डी: आपको शायद उसके लिए एक नया प्रश्न खोलना चाहिए। क्रोम में Svgweb की जरूरत नहीं है।

— एरिक डहलस्ट्रम

थैंक यू एरिक, वास्तव में संघर्ष करने की कोशिश कर रहा था फ़ॉन्ट-चेहरे को एसवीएस में काम करने के लिए सीएसएस के माध्यम से, एसवीएस में सीवी को जोड़ने से पहले कोशिश करो और चमत्कारिक रूप से क्रॉस ब्राउज़र पर काम किया!

— डेव

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

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

— आर रेवले
स्रोत

यदि SVG को टैग करने के लिए टैग का उपयोग करने का एकमात्र कारण यह है कि आप SVG से मार्कअप के साथ अपने स्रोत कोड को अव्यवस्थित नहीं करना चाहते हैं, तो आपको SVGInject जैसे SVG इंजेक्टर पर एक नज़र डालनी चाहिए ।

SVG इंजेक्शन आपके HTML दस्तावेज़ में SVG फ़ाइल इनलाइन इंजेक्ट करने के लिए जावास्क्रिप्ट का उपयोग करता है। यह सीवीजी को सीएसएस के साथ पूरी तरह से शैली बनाते हुए स्वच्छ HTML स्रोत कोड की अनुमति देता है। एक बुनियादी उदाहरण इस तरह दिखता है:

<html>
<head>
  <script src="svg-inject.min.js"></script>
</head>
<body>
  <img src="image.svg" onload="SVGInject(this)" />
</body>
</html>

— Waruyama
स्रोत

बहुत बढ़िया! स्वच्छ उपकरण के लिए धन्यवाद।

— डेलेप्लेस