एसवीजी में पाठ का पृष्ठभूमि रंग

Question

मैं svg की पृष्ठभूमि रंग करने के लिए चाहते हैं textके लिए इसी तरह background-colorसीएसएस में

मैं केवल प्रलेखन को खोजने में सक्षम था fill, जो पाठ को स्वयं रंग देता है

क्या यह भी संभव है?

Comments

क्या आप अपना कोड अब तक साझा कर सकते हैं?

— गत

ये भी मदद कर सकता है stackoverflow.com/questions/6725288/svg-text-inside-rect और stackoverflow.com/questions/8675223/...

— gotohales

stackoverflow.com/questions/12260370/… यह भी दिखाता है कि फ़िल्टर का उपयोग करके ऐसा कैसे करें।

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

@RobertLongson इस प्रश्न को दोहराव के रूप में बंद कर रहा है जब यह पूछा गया था कि 2 साल पहले दूसरे को गलत लगता है, खासकर जब एकमात्र उत्तर आपका है।

— बाल्टाजार

@ Aperçu: डुप्लिकेट लक्ष्य चुनते समय एक प्रश्न की उम्र मुख्य कारक नहीं है, उदाहरण के लिए यहां देखें ।

— हार्न

Answer 1

यह संभव नहीं है, एसवीजी तत्वों में background-... प्रस्तुति विशेषताएँ नहीं हैं ।

इस आशय का अनुकरण करने के लिए आप पाठ विशेषता के पीछे एक आयत fill="green"या कुछ समान (फ़िल्टर) आकर्षित कर सकते हैं । जावास्क्रिप्ट का उपयोग आप निम्नलिखित कर सकते हैं:

var ctx = document.getElementById("the-svg"),
textElm = ctx.getElementById("the-text"),
SVGRect = textElm.getBBox();

var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
    rect.setAttribute("x", SVGRect.x);
    rect.setAttribute("y", SVGRect.y);
    rect.setAttribute("width", SVGRect.width);
    rect.setAttribute("height", SVGRect.height);
    rect.setAttribute("fill", "yellow");
    ctx.insertBefore(rect, textElm);

Comments

पाठ पर एक svg फ़िल्टर (feFlood + feComposite) का उपयोग करें। इसी तरह के कुछ सवाल देखें stackoverflow.com/questions/12260370/… ।

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

GetBBox () का उपयोग करते हुए यह समाधान, हालांकि यह ठीक काम करता है, काफी धीमी गति से हो सकता है जब बड़ी संख्या में गणना करने की आवश्यकता होती है। Svg फ़िल्टर (feFlood + feComposite) का उपयोग करने के साथ समस्या यह है कि पाठ थोड़ा दांतेदार हो जाता है। नीचे एक सरल, लेकिन हैकी समाधान प्रस्तुत किया है।

— dbarton_uk

TextElm = ctx.getElementById ("-the-text") के बजाय textElm = document.getElementById ("-text") का उपयोग करना बेहतर है?

— साइमन हाय

कैसे मैं नोड में एक ही getBBox फ़ंक्शन का उपयोग करता हूं नोड

— अली

Answer 2

आप पृष्ठभूमि बनाने के लिए फ़िल्टर का उपयोग कर सकते हैं।

<svg width="100%" height="100%">
  <defs>
    <filter x="0" y="0" width="1" height="1" id="solid">
      <feFlood flood-color="yellow"/>
      <feComposite in="SourceGraphic" operator="xor" />
    </filter>
  </defs>
<text filter="url(#solid)" x="20" y="50" font-size="50">solid background</text>
</svg>

Comments

"सोर्सग्राफिक" का यहां क्या मतलब है? क्या "url (#solid)" वास्तव में एक अतिरिक्त वेब एक्सेस का कारण बनता है?

— बेन स्लेड

पाठ यहाँ धुंधली है :(

— तरण

क्या आप पृष्ठभूमि को पैडिंग दे सकते हैं ?

— vsync

इस समाधान को सिद्धांत रूप में पसंद करें, लेकिन पुष्टि कर सकते हैं कि पाठ धुंधली है। ऐसा लगता है जैसे फ़िल्टर एंटी-अलियासिंग को तोड़ता है।

— पाऊलमेलनिकोव

धुंधले पाठ को रोकने के operator="xor"लिए जोड़ें feComposite। @RobertLongson @teran @paulmelnikow @bill

— Saeid Zebardast

Answer 3

मेरे द्वारा उपयोग किया जाने वाला समाधान है:

<svg>
  <line x1="100" y1="100" x2="500" y2="100" style="stroke:black; stroke-width: 2"/>    
  <text x="150" y="105" style="stroke:white; stroke-width:0.6em">Hello World!</text>
  <text x="150" y="105" style="fill:black">Hello World!</text>  
</svg>

एक डुप्लिकेट पाठ आइटम रखा जा रहा है, स्ट्रोक और स्ट्रोक-चौड़ाई विशेषताओं के साथ। स्ट्रोक को पृष्ठभूमि के रंग से मेल खाना चाहिए, और स्ट्रोक-चौड़ाई बस इतनी होनी चाहिए कि एक "स्पार्क" बना सके जिस पर वास्तविक पाठ लिखना है।

थोड़ा सा हैक और संभावित मुद्दे हैं, लेकिन मेरे लिए काम करता है!

Comments

मुझे यह उपाय सबसे आसान लगा।

— मॉर्गन वाइल्ड

इस सबसे आसान समाधान के रूप में पुष्टि की

— स्कोरर

प्रिंट करते समय फिल्टर समाधान के रूप में भी अच्छी तरह से प्रिंट करता है, जहां अच्छी तरह से प्रिंट।

— डेविड हंट

Answer 4

नहीं, आप SVG एलिमेंट्स में बैकग्राउंड कलर नहीं जोड़ सकते। आप इसे d3 के साथ प्रोग्राम कर सकते हैं ।

var text = d3.select("text");
var bbox = text.node().getBBox();
var padding = 2;
var rect = self.svg.insert("rect", "text")
    .attr("x", bbox.x - padding)
    .attr("y", bbox.y - padding)
    .attr("width", bbox.width + (padding*2))
    .attr("height", bbox.height + (padding*2))
    .style("fill", "red");

Comments

यह काम नहीं करता; यह केवल पाठ का रंग बदलता है, न कि पृष्ठभूमि का रंग।

— डेविड जे।

पाठ को div या स्पैन में संलग्न करें और आपके द्वारा उपयोग किए गए अंतिम दो में से जो भी हो, स्टाइल लागू करें।

— आरिफ बुरहान

यह पोस्ट इसे अच्छी तरह से समझाती है: कैम्ब्रिज

— एक्सचेंज

Answer 5

<text>टैग का उपयोग करने के बजाय , टैग का उपयोग <foreignObject>किया जा सकता है, जो सीएसएस के साथ एक्सएचटीएमएल सामग्री की अनुमति देता है।

Comments

क्या आप एक उदाहरण छोड़ सकते हैं?

— इग्नाइटकॉडर्स

अधूरा जवाब। developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject में एक उपयोगी उदाहरण है। अपने विदेशी ऑबजेक्ट के भीतर आप सीएसएस परिभाषाओं के साथ डिव और स्पैन का उपयोग कर सकते हैं।

— डे जेरी

Answer 6

संशोधनों के साथ रॉबर्ट लोंगसन (@RobertLongson) का जवाब:

<svg width="100%" height="100%">
  <defs>
    <filter x="0" y="0" width="1" height="1" id="solid">
      <feFlood flood-color="yellow"/>
      <feComposite in="SourceGraphic" operator="xor"/>
    </filter>
  </defs>
  <text filter="url(#solid)" x="20" y="50" font-size="50"> solid background </text>
  <text x="20" y="50" font-size="50">solid background</text>
</svg>

और हमारे पास कोई ब्लरिंग नहीं है और न ही कोई भारी "गेटबॉक्स" है: पैडिंग को फिल्टर के साथ टेक्स्ट-एलिमेंट में व्हाइट स्पेस द्वारा प्रदान किया गया है। यह मेरे लिए काम किया है

Answer 7

यह मेरी पसंदीदा हैक है (निश्चित रूप से यह काम नहीं करना चाहिए)। यह एक ऐसे तत्व को संदर्भित करता है जो अभी तक प्रदर्शित नहीं हुआ है, और यह बहुत अच्छी तरह से काम करता है

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 620 40" preserveAspectRatio="xMidYMid meet">
    <defs>
        <filter x="-0.02" y="0" width="1.04" height="1.1" id="removebackground">
            <feFlood flood-color="#00ffff"/>
        </filter>
    </defs>

    <!--Draw the text--> 
    <use xlink:href="#mygroup" filter="url(#removebackground)" />
    <g id="mygroup">
        <text id="text1" x="9" y="20" style="text-anchor:start;font-size:14px;">custom text with background</text>  
        <line x1="200" y1="18" x2="200" y2="36" stroke="#000" stroke-width="5"/> 
        <line x1="120" y1="27" x2="203" y2="27" stroke="#000" stroke-width="5"/> 
    </g>
</svg>

Answer 8

आप पाठ के साथ फ़िल्टर को जोड़ सकते हैं।

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>SVG colored patterns via mask</title>
  </head>
  <body>
    <svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <filter x="0" y="0" width="1" height="1" id="bg-text">
          <feFlood flood-color="white"/>
          <feComposite in="SourceGraphic" operator="xor" />
        </filter>
      </defs>
	  <!-- something has already existed -->
    <rect fill="red" x="150" y="20" width="100" height="50" />
    <circle cx="50"  cy="50" r="50" fill="blue"/>
      
      <!-- Text render here -->
      <text filter="url(#bg-text)" fill="black" x="20" y="50" font-size="30">text with color</text>
      <text fill="black" x="20" y="50" font-size="30">text with color</text>
    </svg>
  </body>
</html> 

Answer 9

उन लोगों के लिए जो किसी टेक्स्ट एलिमेंट पर पैडिंग कैसे लगाते हैं, जब उसका बैकग्राउंड रॉबर्ट के जवाब की तरह होता है , तो निम्न कार्य करें:

  <svg>
    <defs>
      <filter x="-0.1" y="-0.1" width="1.2" height="1.2" id="solid">
        <feFlood flood-color="#171717"/>
        <feComposite in="SourceGraphic" operator="xor" />
      </filter>
    </defs>
    <text filter="url(#solid)" x="20" y="50" font-size="50">Hello</text>
  </svg>

ऊपर के उदाहरण में, फ़िल्टर के x और y पदों का उपयोग किया जा सकता है transform: translate(-10%, -10%), और चौड़ाई और ऊंचाई के मानों को 120%और के रूप में पढ़ा जा सकता है 120%। इसलिए हमने बैकग्राउंड को 20% बड़ा कर दिया, और इसे -10% ऑफसेट कर दिया, इसलिए टेक्स्ट के हर तरफ बैकग्राउंड अब 10% बड़ा हो गया है।

Answer 10

पिछले उत्तर पाठ को दोगुना करने और पर्याप्त व्हाट्सएप की कमी पर निर्भर थे।

का उपयोग करके atopऔर  मैं अपने इच्छित परिणाम प्राप्त करने में सक्षम था।

इस उदाहरण में तीर भी शामिल हैं, एसवीजी पाठ लेबल के लिए एक सामान्य उपयोग मामला:

<svg viewBox="-105 -40 210 234">
<title>Size Guide</title>
<defs>
    <filter x="0" y="0" width="1" height="1" id="solid">
        <feFlood flood-color="white"></feFlood>
        <feComposite in="SourceGraphic" operator="atop"></feComposite>
    </filter>
    <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
        <path d="M 0 0 L 10 5 L 0 10 z"></path>
    </marker>
</defs>
<g id="garment">
    <path id="right-body" fill="none" stroke="black" stroke-width="1" stroke-linejoin="round" d="M0 0 l30 0 l0 154 l-30 0"></path>
    <path id="right-sleeve" d="M30 0 l35 0 l0 120 l-35 0" fill="none" stroke-linejoin="round" stroke="black" stroke-width="1"></path>
    <use id="left-body" href="#right-body" transform="scale(-1,1)"></use>
    <use id="left-sleeve" href="#right-sleeve" transform="scale(-1,1)"></use>
    <path id="collar-right-top" fill="none" stroke="black" stroke-width="1" stroke-linejoin="round" d="M0 -6.5 l11.75 0 l6.5 6.5"></path>
    <use id="collar-left-top" href="#collar-right-top" transform="scale(-1,1)"></use>
    <path id="collar-left" fill="white" stroke="black" stroke-width="1" stroke-linejoin="round" d="M-11.75 -6.5 l-6.5 6.5 l30 77 l6.5 -6.5 Z"></path>
    <path id="front-right" fill="white" stroke="black" stroke-width="1" d="M18.25 0 L30 0 l0 154 l-41.75 0 l0 -77 Z"></path>
    <line x1="0" y1="0" x2="0" y2="154" stroke="black" stroke-width="1" stroke-dasharray="1 3"></line>
    <use id="collar-right" href="#collar-left" transform="scale(-1,1)"></use>
</g>
<g id="dimension-labels">
    <g id="dimension-sleeve-length">
        <line marker-start="url(#arrow)" marker-end="url(#arrow)" x1="85" y1="0" x2="85" y2="120" stroke="black" stroke-width="1"></line>
        <text font-size="10" filter="url(#solid)" fill="black" x="85" y="60" class="dimension" text-anchor="middle" dominant-baseline="middle"> 120 cm</text>
    </g>
    <g id="dimension-length">
        <line marker-start="url(#arrow)" marker-end="url(#arrow)" x1="-85" y1="0" x2="-85" y2="154" stroke="black" stroke-width="1"></line>
        <text font-size="10" filter="url(#solid)" fill="black" x="-85" y="77" text-anchor="middle" dominant-baseline="middle" class="dimension"> 154 cm</text>
    </g>
    <g id="dimension-sleeve-to-sleeve">
        <line marker-start="url(#arrow)" marker-end="url(#arrow)" x1="-65" y1="-20" x2="65" y2="-20" stroke="black" stroke-width="1"></line>
        <text font-size="10" filter="url(#solid)" fill="black" x="0" y="-20" text-anchor="middle" dominant-baseline="middle" class="dimension">&nbsp;130 cm&nbsp;</text>
    </g>
    <g title="Back Width" id="dimension-back-width">
        <line marker-start="url(#arrow)" marker-end="url(#arrow)" x1="-30" y1="174" x2="30" y2="174" stroke="black" stroke-width="1"></line>
        <text font-size="10" filter="url(#solid)" fill="black" x="0" y="174" text-anchor="middle" dominant-baseline="middle" class="dimension">&nbsp;60 cm&nbsp;</text>
    </g>
</g>
</svg>

Answer 11

आप अपने पाठ में शैली जोड़ सकते हैं:

  style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
    text-shadow: rgb(255, 255, 255) -2px -2px 0px, rgb(255, 255, 255) -2px 2px 0px, 
     rgb(255, 255, 255) 2px -2px 0px, rgb(255, 255, 255) 2px 2px 0px;"

सफेद, इस उदाहरण में। IE में काम नहीं करता है :)