एसवीजी तत्व का रंग कैसे बदलें?

349

मैं इस तकनीक का उपयोग करना चाहते http://css-tricks.com/svg-fallbacks/ और svg रंग बदल लेकिन अभी तक मैं ऐसा करने में सक्षम नहीं किया गया है। मैंने इसे सीएसएस में डाल दिया, लेकिन मेरी छवि हमेशा काली है, चाहे जो भी हो। मेरा कोड:

.change-my-color {
  fill: green;
}
<svg>
    <image class="change-my-color" xlink:href="https://svgur.com/i/AFM.svg" width="96" height="96" src="ppngfallback.png" />
</svg>
स्निपेट का विस्तार करें

css  svg 
— बारबरा
स्रोत
मैं कोई svg विशेषज्ञ नहीं हूँ, लेकिन क्या आपने पृष्ठभूमि-रंग भरने की कोशिश की है?
— मेग
Svg बैकग्राउंड-कलर में @Megan 'फिल' प्रॉपर्टी और 'स्ट्रोक' (जैसा कि आप इलस्ट्रेटर में करते हैं) के साथ बॉर्डर को निर्दिष्ट किया गया है। w3.org/TR/SVG/propidx.html
— बारबरा
4
आपके HTML दस्तावेज़ से सीएसएस एसवीजी तत्वों पर लागू नहीं होगा <img />
— pawel
1
यह अब संभव है। यहाँ सरल और कार्यात्मक उत्तर: stackoverflow.com/a/53336754/467240
— mtyson

जवाबों:

188

आप उस तरह से एक छवि का रंग नहीं बदल सकते। यदि आप एसवीजी को एक छवि के रूप में लोड करते हैं, तो आप इसे ब्राउज़र में CSS या जावास्क्रिप्ट का उपयोग करके प्रदर्शित नहीं कर सकते।

आप अपने एसवीजी छवि बदलना चाहते हैं, तो आप इसे का उपयोग कर लोड करने के लिए है <object>, <iframe>या का उपयोग कर <svg>इनलाइन।

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

देख :

कोड स्निपेट दिखाएं

आप अपनी एसवीजी को इनलाइन कर सकते हैं, अपनी नाम वापसी छवि को एक वर्ग नाम ( my-svg-alternate) के साथ टैग कर सकते हैं :

<svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path id="time-3-icon" .../>
</svg>

<image class="my-svg-alternate" width="96" height="96" src="ppngfallback.png" />

और CSS में SVG सपोर्ट के लिए जाँच करने के लिए no-svgModernizr (CDN: http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js ) से क्लास का उपयोग करें । यदि कोई एसवीजी समर्थन नहीं है तो एसवीजी ब्लॉक को नजरअंदाज कर दिया जाएगा और छवि को प्रदर्शित किया जाएगा, अन्यथा छवि को डोम ट्री से हटा दिया जाएगा ( display: none):

.my-svg-alternate {
  display: none;
}
.no-svg .my-svg-alternate {
  display: block;
  width: 100px;
  height: 100px;
  background-image: url(image.png);
}

तब आप अपने इनलाइन तत्व का रंग बदल सकते हैं:

#time-3-icon {
   fill: green;
}
— helderdarocha
स्रोत
5
आप objectहोस्टिंग दस्तावेज़ से एम्बेडेड एसवीजी को स्टाइल नहीं कर सकते ।
— जेवियर रे
1
@JavierRey आप स्टाइल को ऑब्जेक्ट टैग की सामग्री में जावास्क्रिप्ट के माध्यम से इंजेक्ट कर सकते हैं। लेकिन आप सही हैं कि यह लागू नहीं होता है यदि आप इसे होस्टिंग दस्तावेज़ की स्टाइलशीट में जोड़ते हैं।
— रॉबर्ट लोंगसन
2
मैं @ मनीष-मेनारिया से समाधान का उपयोग कर रहा हूं और यह पूरी तरह से काम करता है।
— रयान एलिस
1
स्वीकृत उत्तर को बदल दिया जाना चाहिए: stackoverflow.com/a/53336754/467240
— mtyson 7
375

2020 का जवाब

CSS फ़िल्टर सभी वर्तमान ब्राउज़रों पर काम करता है

किसी भी एसवीजी रंग को बदलने के लिए

  1. एक <img>टैग का उपयोग करके SVG छवि जोड़ें ।
<img src="dotted-arrow.svg" class="filter-green"/>
  1. किसी विशिष्ट रंग को फ़िल्टर करने के लिए, हेक्स रंग कोड को CSS फ़िल्टर में बदलने के लिए निम्न कोडपेन (यहां क्लिक करें कोडपेन खोलने के लिए ) का उपयोग करें :

उदाहरण के लिए, के लिए आउटपुट #00EE00है

filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);
  1. filterइस वर्ग में सीएसएस जोड़ें ।
    .filter-green{
        filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
    }
— मनीष मेनारिया
स्रोत
5
यह पुराने ब्राउज़र संस्करणों में समर्थित नहीं होने के बारे में सामान्य चेतावनी के साथ आता है: developer.mozilla.org/en-US/docs/Web/CSS/…
— केविन वांग
17
जैसा कि कोडपेन में उल्लेख किया गया है, यदि आपका एसवीजी काला नहीं है (मेरा ग्रे था), brightness(0) saturate(100%)फिल्टर की सूची में शुरुआत करने से यह पहले 100% काला हो जाएगा, जो अन्य फिल्टर को सही रंग में बदलने में सक्षम बनाता है।
— १६:०६
2
इसके अलावा, इस StackOverflow सवाल है कि CodePen को सूचित में समाधान पर आकर्षक पृष्ठभूमि के बहुत सारे ।
— jdunning
3
मेरा आदमी। समर्थन स्वीकार्य caniuse.com/#feat=css-filters लगता है ।
— सैम डोज
इतनी अच्छी तरह से काम करता है, एक फिल्टर में मेरी हेक्स पाने के लिए इस असम्बद्ध कोडपेन का इस्तेमाल किया: codepen.io/sosuke/pen/Pjoqqp
— WEBjuju
220

किसी भी SVG का रंग बदलने के लिए आप किसी भी टेक्स्ट एडिटर में svg फाइल को खोलकर सीधे svg कोड बदल सकते हैं । कोड नीचे दिए गए कोड की तरह लग सकता है

<?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
    <g>
        <path d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223
            C181.113,454.921,171.371,464.663,161.629,474.404z"/>
    /*Some more code goes on*/
    </g>
    </svg>

आप देख सकते हैं कि कुछ XML टैग्स जैसे पथ, सर्कल, बहुभुज आदि हैं । वहां आप स्टाइल विशेषता की मदद से अपना रंग जोड़ सकते हैं । नीचे दिए गए उदाहरण को देखें

<path style="fill:#AB7C94;" d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223
                C181.113,454.921,171.371,464.663,161.629,474.404z"/>

सभी टैग में शैली विशेषता जोड़ें ताकि आप अपने आवश्यक रंग का अपना एसवीजी प्राप्त कर सकें

— sushant047
स्रोत
48
सिर्फ fillइस तरह की विशेषता का उपयोग क्यों नहीं किया जाता है fill = "#AB7C94":? निश्चित नहीं है कि styleविशेषता की आवश्यकता क्यों है
— bg17aw
4
हाय डैनियल, हाँ यह काम करता है। मुझे नहीं पता था कि फिल को एक विशेषता के रूप में इस्तेमाल किया जा सकता है। आपकी टिप्पणी इतनी लंबी @ bg17aw
— sushant047
30

फ़िल्टर सेटिंग्स के माध्यम से SVG को रंगीन करने के लिए एक परीक्षण पृष्ठ जोड़ा गया:

ईजी filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg)

अपने SVG - Jsfiddle को अपलोड करें और रंग दें

इस विचार से लिया: https://blog.union.io/code/2017/08/10/img-svg-fill/

— योनतन अयलान
स्रोत
1
धन्यवाद, आप सिर्फ मुझे खुद से बचाएं। .custom-disabled > svg {filter:invert(0.2) sepia(1) saturte(0) hue-rotate(0);}क्या मुझे अक्षम आइकन के लिए सिर्फ काम करना था।
— मुर्गा
20

पथ सूचना के साथ केवल एसवीजी । आप छवि के लिए ऐसा नहीं कर सकते .. पथ के रूप में आप स्ट्रोक को बदल सकते हैं और जानकारी भर सकते हैं और आप कर रहे हैं। इलस्ट्रेटर की तरह

इसलिए: CSS के माध्यम से आप पथ fillमान को अधिलेखित कर सकते हैं

path { fill: orange; }

लेकिन अगर आप अधिक लचीला तरीका चाहते हैं, जैसा कि आप इसे एक पाठ के साथ बदलना चाहते हैं जब कुछ मँडरा प्रभाव चल रहा है .. उपयोग करें 

path { fill: currentcolor; }

body {
  background: #ddd;
  text-align: center;
  padding-top: 2em;
}

.parent {
  width: 320px;
  height: 50px;
  display: block;
  transition: all 0.3s;
  cursor: pointer;
  padding: 12px;
  box-sizing: border-box;
}

/***  desired colors for children  ***/
.parent{
  color: #000;
  background: #def;
}
.parent:hover{
  color: #fff;
  background: #85c1fc;
}

.parent span{
  font-size: 18px;
  margin-right: 8px;
  font-weight: bold;
  font-family: 'Helvetica';
  line-height: 26px;
  vertical-align: top;
}
.parent svg{
  max-height: 26px;
  width: auto;
  display: inline;
}

/****  magic trick  *****/
.parent svg path{
  fill: currentcolor;
}
<div class='parent'>
  <span>TEXT WITH SVG</span>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128" viewBox="0 0 32 32">
<path d="M30.148 5.588c-2.934-3.42-7.288-5.588-12.148-5.588-8.837 0-16 7.163-16 16s7.163 16 16 16c4.86 0 9.213-2.167 12.148-5.588l-10.148-10.412 10.148-10.412zM22 3.769c1.232 0 2.231 0.999 2.231 2.231s-0.999 2.231-2.231 2.231-2.231-0.999-2.231-2.231c0-1.232 0.999-2.231 2.231-2.231z"></path>
</svg>
</div>
स्निपेट का विस्तार करें

— बिस्मार्ट मुहम्मद
स्रोत
12

सबसे आसान तरीका है कि आप https://icomoon.io/app/#/select या इस तरह की सेवा का उपयोग करके एसवीजी से एक फ़ॉन्ट बना सकते हैं। अपना एसवीजी अपलोड करें, "जेनरेट फॉन्ट" पर क्लिक करें, फॉन्ट फाइल और सीएसएस को अपने पक्ष में शामिल करें और इसे किसी अन्य पाठ की तरह ही उपयोग और स्टाइल करें। मैं हमेशा इसे इस तरह से उपयोग करता हूं क्योंकि यह स्टाइल को बहुत आसान बनाता है।

संपादित करें: जैसा कि लेख में उल्लेख किया गया है @ CodeMouse92 आइकन फ़ॉन्ट द्वारा टिप्पणी स्क्रीन पाठकों को गड़बड़ करती है (और संभवतः एसईओ के लिए खराब है)। बल्कि एसवीजी से चिपके रहते हैं।

— फेलिक्स हैगस्पिल
स्रोत
4
यह स्क्रीन पाठकों को भी गड़बड़ करता है। सेरेन डेविस द्वारा "डेथ टू आइकन
— फॉन्ट्स
7

एक पृष्ठभूमि रंग के साथ एक बॉक्स तत्व पर SVG मास्क परिणाम देगा:

.icon{
  --size     : 70px;
  display    : inline-block;
  width      : var(--size);
  height     : var(--size);
  transition : .12s;
  -webkit-mask-size: cover;
  mask-size  : cover;
}

.icon-bike{
  background: black;
  -webkit-mask-image: url(https://image.flaticon.com/icons/svg/89/89139.svg);
  mask-image: url(hhttps://image.flaticon.com/icons/svg/89/89139.svg);
  animation: 1s frames infinite ease;
}

@keyframes frames {
  50% { background:red;  }
}
<i class="icon icon-bike" style="--size:150px"></i>
स्निपेट का विस्तार करें

नोट - एसवीजी मास्क इंटरनेट एक्सप्लोरर ब्राउज़रों में समर्थित नहीं हैं

— vsync
स्रोत
1
बहुत बहुत धन्यवाद, @vsync यह सिर्फ सबसे अच्छा हैक है जो मुझे चाहिए।
— विक्सन
6

यदि आप कुछ ट्रिक्स का उपयोग करते हैं तो आप सीवीएस के साथ एसवीजी रंग बदल सकते हैं। मैंने उसके लिए एक छोटी सी स्क्रिप्ट लिखी थी।

  • उन तत्वों की सूची से गुज़रें जिनमें एक svg छवि है
  • xml के रूप में svg फ़ाइल लोड करें
  • केवल svg हिस्सा लाएं
  • पथ का रंग बदलें
  • इनलाइन छवि के रूप में संशोधित svg के साथ src को बदलें
$('img.svg-changeable').each(function () {
  var $e = $(this);
  var imgURL = $e.prop('src');

  $.get(imgURL, function (data) {
    // Get the SVG tag, ignore the rest
    var $svg = $(data).find('svg');

    // change the color
    $svg.find('path').attr('fill', '#000');

    $e.prop('src', "data:image/svg+xml;base64," + window.btoa($svg.prop('outerHTML')));
  });

});

ऊपर दिया गया कोड सही तरीके से काम नहीं कर रहा है, मैंने इसे svg पृष्ठभूमि छवि वाले तत्वों के लिए लागू किया है जो लगभग इसी तरह काम करता है। लेकिन वैसे भी आपको अपने मामले को फिट करने के लिए इस स्क्रिप्ट को संशोधित करना होगा। उम्मीद है कि यह मदद की।

— cydoc
स्रोत
वैसे: यदि आप एक RoR डेवलपर हैं, तो आप sass precompiler के लिए एक नई विधि जोड़ सकते हैं जो काम भी कर सकती है। यह बहुत बेहतर है क्योंकि आपके संकलित सीएसएस फ़ाइल में बेस 64 एनकोडेड, सही रंगीन छवि होगी। कोई जे एस की जरूरत है! हो सकता है कि मैंने जो कोड लिखा है, मैं उसे उपलब्ध करा सकूं, सीटीओ से बात करनी होगी।
— cydoc
2
एक समाधान प्रदान करने के लिए +1, कहने के बजाय यह नहीं किया जा सकता है। यह उत्तर भी प्रासंगिक है: stackoverflow.com/questions/11978995/…
— क्लेडट्रॉनिकन नोव
5

Svg के भीतर पथ को लक्षित करें:

<svg>
   <path>....
</svg>

आप इनलाइन कर सकते हैं, जैसे:

<path fill="#ccc">

या

svg{
   path{
        fill: #ccc
— माइकल फिलिप्स
स्रोत
2

यदि आप इनलाइन svg के लिए ऐसा करना चाहते हैं, उदाहरण के लिए, आपके css में एक बैकग्राउंड इमेज:

background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgba(31,159,215,1)' viewBox='...'/%3E%3C/svg%3E");
स्निपेट का विस्तार करें

बेशक, अपने इनलाइन छवि कोड के साथ ... को बदलें

— दृष्टि हाइव
स्रोत
2

उदाहरण के लिए, अपने HTML में:

<body>
  <svg viewBox="" width="" height="">
    <path id="struct1" fill="#xxxxxx" d="M203.3,71.6c-.........."></path>
  </svg>
</body>

JQuery का उपयोग करें:

$("#struct1").css("fill","<desired colour>");
— Grv97
स्रोत
यह केवल तभी काम करता है जब आप HTML में SVG फ़ाइल इनलाइन शामिल करते हैं। मैंने यह स्पष्ट करने के लिए आपके उत्तर को संपादित कर दिया है।
— फ्लिकम
0

दरअसल, इस समस्या का एक और अधिक लचीला समाधान है: एक वेब घटक लिखना जो रनटाइम में एसवीजी को पाठ के रूप में पैच करेगा। इसके अलावा में प्रकाशित सार JSFiddle के लिंक के साथ

👍 फ़िल्टर: इनवर्ट (42%) सीपिया (93%) संतृप्त (1352%) ह्यू-रोटेट (87 डिग्री) चमक (119%) कंट्रास्ट (119%);

<html>

<head>
  <title>SVG with color</title>
</head>

<body>
  <script>
    (function () {
      const createSvg = (color = '#ff9933') => `
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="76px" height="22px" viewBox="-0.5 -0.5 76 22">
            <defs/>
              <g>
                <ellipse cx="5" cy="10" rx="5" ry="5" fill="#ff9933" stroke="none" pointer-events="all"/>
                <ellipse cx="70" cy="10" rx="5" ry="5" fill="#ff9933" stroke="none" pointer-events="all"/>
                <path d="M 9.47 12.24 L 17.24 16.12 Q 25 20 30 13 L 32.5 9.5 Q 35 6 40 9 L 42.5 10.5 Q 45 12 50 6 L 52.5 3 Q 55 0 60.73 3.23 L 66.46 6.46" fill="none" stroke="#ff9933" stroke-miterlimit="10" pointer-events="stroke"/>
              </g>
          </svg>`.split('#ff9933').join(color);

      function SvgWithColor() {
        const div = Reflect.construct(HTMLElement, [], SvgWithColor);
        const color = div.hasAttribute('color') ? div.getAttribute('color') : 'cyan';
        div.innerHTML = createSvg(color);
        return div;
      }

      SvgWithColor.prototype = Object.create(HTMLElement.prototype);
      customElements.define('svg-with-color', SvgWithColor);

      document.body.innerHTML += `<svg-with-color
        color='magenta' 
      ></svg-with-color>`;

    })();

  </script>
</body>

</html>
— पेट्र त्रिपोलस्की
स्रोत
-1

सबसे छोटा बूटस्ट्रैप-संगत तरीका, कोई जावास्क्रिप्ट नहीं:

.cameraicon {
height: 1.6em;/* set your own icon size */
mask: url(/camera.svg); /* path to your image */
-webkit-mask: url(/camera.svg) no-repeat center;
}

और इसका उपयोग करें:

<td class="text-center">
    <div class="bg-secondary cameraicon"/><!-- "bg-secondary" sets actual color of your icon -->
</td>
— वुल्फ्रेवो बिल्लियों
स्रोत
-1

एक ब्राउज़र का उपयोग करके अपनी छवि खोलें, छवि पर राइट-क्लिक करें व्यू पेज स्रोत पर क्लिक करें और आपको छवि का svg टैग दिखाई देगा। अपने HTML में काटें और चिपकाएँ, फिर भरण को अपनी पसंद के रंग में बदलें

— चीमेली अका
स्रोत
स्वीकार किए जाते हैं जवाब पहले से ही इनलाइन करने और फिर समाधान के रूप में रंग की स्थापना पता चलता है।
— रॉबर्ट लोंगसन
-1

सीधे शब्दों में जोड़ें: छवि के svg टैग में "वांछित रंग": उदाहरण:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#bbb9c6">
<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
— शिवानी
स्रोत
यह मूल रूप से इस उत्तर या इस एक
— रॉबर्ट लोंगसन
उन उत्तरों ने पथ टैग में भरने का उल्लेख किया है, इसने मेरे लिए svg टैग में काम किया है, इसलिए मैंने इसे पोस्ट किया है
— शिवानी
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.