एसवीजी रूट तत्व का डिफ़ॉल्ट पृष्ठभूमि रंग

Question

मैं उदाहरण के लिए लाल करने के लिए पूरे SVG दस्तावेज़ के लिए एक डिफ़ॉल्ट पृष्ठभूमि रंग सेट करना चाहूंगा।

<svg viewBox="0 0 500 600" style="background: red">/* content */</svg>

उपरोक्त समाधान काम करता है लेकिन शैली विशेषता की पृष्ठभूमि संपत्ति दुर्भाग्य से एक मानक नहीं है: http://www.w3.org/TR/SVG/styling.html#SVGStylingProperties , और इसलिए यह SVG के साथ सफाई प्रक्रिया के दौरान हटा दी जाती है सफाई वाला।

क्या इस पृष्ठभूमि के रंग को घोषित करने का एक और तरीका है?

Comments

वहाँ भी शायद एसवीजी क्लीनर में एक बग है? यह इनलाइन शैली ब्लॉकों को भी हटा देता है, हालाँकि वे मानक हैं: w3.org/TR/SVG/styling.html#StylingWithCSS

— Volker E.

Answer 1

एसवीजी 1.2 टिनी के पास व्यूपोर्ट-फिल है मुझे यकीन नहीं है कि इस संपत्ति को व्यापक रूप से कैसे लागू किया गया है, क्योंकि अधिकांश ब्राउज़र इस समय एसवीजी 1.1 को लक्षित कर रहे हैं। ओपेरा इसे FWIW लागू करता है।

वर्तमान में एक अधिक क्रॉस-ब्राउज़र समाधान <rect>100% की चौड़ाई और ऊंचाई के साथ एक तत्व को छड़ी करने के लिए होगा और <svg>उदाहरण के लिए, तत्व के पहले बच्चे के रूप में = "लाल" भरें :

<rect width="100%" height="100%" fill="red"/>

Comments

रेक हैक प्रकार काम करता है, लेकिन यह मानता है कि svg का पहलू अनुपात हमेशा उस व्यूपोर्ट से मेल खाता है, जिससे यह सभी स्थितियों में पूरे व्यूपोर्ट को नहीं भरेगा।

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

जब पहलू अनुपात व्यूपोर्ट से मेल नहीं खाता है तो उपयोग करके width="10000%" height="10000%"इसे ठीक कर सकते हैं। यदि नहीं तो कुछ शून्य जोड़

— mulllhausen

@mulllhausen दुर्भाग्य से 10000000% के रूप में एक मूल्य जोड़ने के रूप में उच्च काम नहीं किया। कोई अन्य सुझाव?

— क्रैशलॉट

एक परित्यक्त viewport-fillकैनीयूज़ पुल अनुरोध: github.com/Fyrd/caniuse/issues/2186 उन्होंने एसवीजी को क्यों मरने दिया।

— सिरो संतिली 郝海东 冠状 iro 事件 法轮功

Answer 2

सफारी में यह काम मिला। एसवीजी केवल पृष्ठभूमि-रंग के साथ रंग देता है जहां एक तत्व की बाउंडिंग बॉक्स कवर होता है। तो, इसे एक शून्य पिक्सेल सीमा के साथ एक सीमा (स्ट्रोक) दें। यह आपके बैकग्राउंड-कलर के साथ आपके लिए पूरी चीज भरता है।

<svg style='stroke-width: 0px; background-color: blue;'> </svg>

Comments

यह सभी उप-तत्व स्ट्रोक को शून्य-चौड़ाई के समान बनाता है, इसलिए इसका अच्छा "पृष्ठभूमि" विकल्प नहीं है।

— डुआनेव

Answer 3

यह @Robert Longson का जवाब है, अब कोड के साथ (मूल रूप से कोई कोड नहीं था, इसे बाद में जोड़ा गया था):

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
 <rect width="100%" height="100%" fill="red"/>
</svg>

यह उत्तर उपयोग करता है:

• https://stackoverflow.com/a/11293812/6747994
• https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes

Answer 4

मुझे मिला एक बहुत ही सरल समाधान बताएं, जो पिछले उत्तरों में नहीं लिखा गया है। मैं भी एक एसवीजी में पृष्ठभूमि स्थापित करना चाहता था, लेकिन मैं यह भी चाहता हूं कि यह एक स्टैंडअलोन एसवीजी फ़ाइल में काम करता है।

खैर, यह समाधान वास्तव में सरल है, वास्तव में एसवीजी शैली टैग का समर्थन करता है, इसलिए आप कुछ ऐसा कर सकते हैं

<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">
  <style>svg { background-color: red; }</style>
  <text>hello</text>
</svg>

Comments

अच्छा और सरल उपाय!

— कॉन्सेप्टडेलिक

हालांकि यह सभी ब्राउज़रों में सामान्य रूप से काम करता है, तत्व background-colorकी स्थापना <svg>IE11 viewBoxविशेषता के साथ परिभाषित क्षेत्र के बाहर पृष्ठभूमि रंग भी प्रस्तुत करेगा । हालांकि इसका उपयोग करने widthऔर heightविशेषताओं पर कोई फर्क नहीं पड़ता ।

— कॉन्सेप्टडेलिक

@conceptdeluxe रोचक अवलोकन, सिद्धांत में svg के अंदर कोडित शैली को केवल svg के अंदर ही लागू करना चाहिए। हालांकि, चौड़ाई और ऊंचाई निर्धारित करना लगभग हमेशा आवश्यक होता है।

— गियानलूका कासती

क्या टैग <svg style"...."></svg>और के बीच अंतर है <svg><style>...</style></svg>, <style>टैग शीर्ष स्तर पर है? यदि नहीं, तो यह उत्तर सिर्फ ओपी के मूल समाधान की तरह लगता है, एक अलग वाक्यविन्यास के तहत पुनर्प्रकाशित। (लेकिन शायद यह समाधान एसवीजी क्लीनर बच जाता है, जबकि <svg style="..."></svg>नहीं?)

— लैब्राडोर

@ लैब्राडोर मैं एक समाधान की तलाश में था, इस प्रश्न को देखा, फिर इसे हल करने का एक तरीका ढूंढा और इसे साझा किया। मुझे नहीं पता, ऐसा लगता है कि इस w3.org/TR/SVG/styling.html#SVGStylingProperties में बताई गई एकमात्र विशेषताएँ समर्थित हैं। दूसरी ओर जो समाधान मैंने प्रस्तावित किया था और मुझे यह पसंद है कि आप अन्य एसवीजी टैग को भी स्टाइल कर सकते हैं, जैसे कि पथ, रेक्ट, आदि। मेरे लिए मुख्य विशेषता यह है कि यह स्टैंडअलोन एसवीजी के लिए भी काम करता है।

— गियानलुका कासती

Answer 5

मैं वर्तमान में इस तरह एक फ़ाइल पर काम कर रहा हूँ:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="style.css" ?>
<svg
  xmlns="http://www.w3.org/2000/svg"
  version="1.1"
  width="100%"
  height="100%"
  viewBox="0 0 600 600">
...

और मैंने इसे लगाने की कोशिश की style.css:

svg {
  background: #bf1f1f;
}

यह क्रोमियम और फ़ायरफ़ॉक्स पर काम कर रहा है , लेकिन मुझे नहीं लगता कि यह एक अच्छा अभ्यास है । EyeOfGnome छवि दर्शक इसे प्रस्तुत नहीं करता है, और इंकस्केप ऐसी पृष्ठभूमि को संग्रहीत करने के लिए एक विशेष नामस्थान का उपयोग करता है:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    version="1.1"
    ...
  <sodipodi:namedview
     pagecolor="#480000" ... >

खैर, ऐसा लगता है कि एसवीजी मूल तत्व एसवीजी सिफारिशों में पेंट करने योग्य तत्वों का हिस्सा नहीं है ।

इसलिए मैं रॉबर्ट लोंगसन द्वारा प्रदान किए गए "रेक्ट" समाधान का उपयोग करने का सुझाव दूंगा क्योंकि मुझे लगता है कि यह एक सरल "हैक" नहीं है। यह एसवीजी के साथ पृष्ठभूमि सेट करने का मानक तरीका प्रतीत होता है ।

Comments

<रेक्ट चौड़ाई = "100%" ऊंचाई = "100%" भरने = "सफेद" /> शुरुआत हल eog के लिए समस्या पर

— nvrandow

Answer 6

एक और वर्कअराउंड <div>लपेटने के लिए एक ही आकार का उपयोग किया जा सकता है <svg>। उसके बाद, आप आवेदन करने में सक्षम होंगे "background-color", और "background-image"इससे प्रभावित होगा svg।

<div class="background">
  <svg></svg>
</div>

<style type="text/css">
.background{
  background-color: black; 
  /*background-image: */
}
</style>

Comments

यह समाधान एक HTML हैक है। और केवल तभी काम कर सकते हैं जब आप SVG का उपयोग किसी वेब पेज में कर रहे हों। यह एक सही एसवीजी समाधान नहीं है।

— चार्ल्स-ardऔर्ड कॉस्टे

एसवीजी की पृष्ठभूमि का रंग उस घटक से उधार लिया गया है जिसमें वह बैठा है। (थोथा जैसे svg पृष्ठ रंग उधार लेता है, और डिफ़ॉल्ट पृष्ठ रंग सफ़ेद होता है)। किसी तरह मुझे नहीं लगता कि यह एक हैक है।

— क्लीनिक

@clinux: चार्ल्स जो कहना चाह रहा था, वह पूरी तरह से वेब पेज रेंडरिंग के लिए काम करता है, लेकिन मान लीजिए कि आप उसी svg को एक छवि के रूप में उपयोग करना चाहते हैं। इसे कहीं और रेंडर करने के लिए .vg एक्सटेंशन, यह काम नहीं कर सकता है।

— अरुणकुमार श्रीसैलपति