img src एसवीजी सीएसएस के साथ शैलियों को बदल रहा है

373

एचटीएमएल

<img src="logo.svg" alt="Logo" class="logo-img">

सीएसएस

.logo-img path {
  fill: #000;
}

उपरोक्त svg भार और मूल रूप से है, fill: #fffलेकिन जब मैं ऊपर cssका उपयोग करके इसे काले रंग में बदलने की कोशिश करता हूं तो यह नहीं बदलता है, यह मेरा पहली बार एसवीजी के साथ खेल रहा है और मुझे यकीन नहीं है कि यह काम क्यों नहीं कर रहा है।

css  image  svg 
— ngplayground
स्रोत
25
आप एसवीजी छवियों को उस तरह से प्रभावित नहीं कर सकते ... केवल इनलाइन एसवीजी तत्व
— पॉलि_ड जूल
1
— इकारस
एसवीजी और सीएसएस की सामग्री का उपयोग करने के लिए यहां मेरे उत्तर की जांच करें। stackoverflow.com/questions/11978995/…
— बेंजामिन
3
— polRk

जवाबों:

153

यदि आपका लक्ष्य केवल लोगो का रंग बदलना है, और आपको जरूरी नहीं कि CSS का उपयोग करना है, तो जावास्क्रिप्ट या jquery का उपयोग न करें जैसा कि कुछ पिछले उत्तरों द्वारा सुझाया गया था।

मूल प्रश्न का सटीक उत्तर देने के लिए, बस:

  1. अपने logo.svgटेक्स्ट एडिटर में खोलें ।

  2. देखने के लिए fill: #fffऔर साथ बदलेंfill: #000

उदाहरण के लिए, आपका logo.svgटेक्स्ट पाठ संपादक में खोले जाने पर ऐसा लग सकता है:

<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
  <path d="M0 0h24v24H0z" fill="none"/>
  <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" fill="#fff"/>
</svg>

... बस भरण बदलो और बचाओ।

— रोवे मोरहाउस
स्रोत
6
... और यदि कोई "भरण" नहीं है, तो आप इसे केवल आइटम pathया circleजैसे आइटम में जोड़ सकते हैं <path fill="#777777" d="m129.774,74.409c-5.523,...।
— SaeX
1
क्या होगा अगर मेरे लोगो में हेडर पर एक रंग और पाद पर दूसरा रंग है?
— rubens.lopes
। @ ruben.lopes दो अलग-अलग फाइलें, या दो अलग-अलग इनलाइन सबसे सरल होंगे
— रोवे मोरहाउस
11
आप भी उपयोग कर सकते हैं fill="currentColor"तो का उपयोग colorपेरेंट तत्व पर css-tricks.com/cascading-svg-fill-color
— सर्ज
10
यह स्पष्ट रूप से संभव है और वास्तव में एक सहायक उत्तर नहीं है।
— टिम्मम्म
102

आप अपने एसवीजी को मास्क के रूप में सेट कर सकते हैं। इस तरह बैकग्राउंड-कलर सेट करना आपके फिलिंग कलर की तरह काम करेगा।

एचटीएमएल

<div class="logo"></div>

सीएसएस

.logo {
    background-color: red;
    -webkit-mask: url(logo.svg) no-repeat center;
    mask: url(logo.svg) no-repeat center;
}

JSFiddle: https://jsfiddle.net/KuhlTime/2j8exgcb/
MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/mask

कृपया जांचें कि आपका ब्राउज़र इस सुविधा का समर्थन करता है: https://caniuse.com/#search=mask

— आंद्रे कुल्हमन
स्रोत
3
तो कुछ के लिए लेकिन आंतरिक वेबसाइट बेकार है।
— हेनरिक वेंडेलेबो
9
29 मई 2016 तक 89% वैश्विक समर्थन।
— गजस
1
यह यहां वर्णित की तरह स्थितियों के लिए एक अद्भुत समाधान है , जहां सीएसएस में डेटा यूरिस के अलावा कुछ भी उपयोग करना थोड़ा दर्द है। धन्यवाद!
— गर्क गार्सिया
3
यह काम नहीं कर रहा है। यह कहता maskहै कि ए invalid property value। मैं क्रोम में यह परीक्षण कर रहा हूँ।
— Eren555
1
@MadMac मैं क्रोम का एक ही संस्करण चला रहा हूं, लेकिन मैं उस व्यवहार को दोहराने में सक्षम नहीं था। क्या यह जेएसफिल्ड है जिसे आपने आज़माया है या आपका कोड?
— आंद्रे कुल्हमन
78

शुद्ध सीएसएस आज़माएं:

.logo-img {
  // to black
  filter: invert(1);
  // or to blue
  // filter: invert(1) sepia(1) saturate(5) hue-rotate(175deg);
}

इस लेख में अधिक जानकारी https://blog.union.io/code/2017/08/10/img-svg-fill/

— Feri
स्रोत
हाल ही में मेरे एक प्रयास के साथ अन्य ब्राउज़रों की तुलना में एज पर एक अलग रंग मिल रहा था।
— जूलिक्स
4
यह सबसे ब्राउज़र में काम करता है लेकिन IOS-Safari ब्राउज़र के साथ कुछ समस्याएँ थीं।
— सिमोन लुडविग
30

2018: यदि आप एक गतिशील रंग चाहते हैं, तो जावास्क्रिप्ट का उपयोग नहीं करना चाहते हैं और एक इनलाइन एसवीजी नहीं चाहते हैं, एक सीएसएस चर का उपयोग करें। क्रोम, फ़ायरफ़ॉक्स और सफारी में काम करता है। संपादित करें: और एज

<svg>
    <use xlink:href="logo.svg" style="--color_fill: #000;"></use>
</svg>

अपने एसवीजी में, से किसी उदाहरण की जगह style="fill: #000"के साथ style="fill: var(--color_fill)"।

— उत्तरि अमेरिका
स्रोत
1
— व्हाट्सएप
@KevinGoedecke Chrome, Firefox, Safari और Edge
— northamerican
4
लगता है पदावनत में एसवीजी 2
— vsync
5
@northamerican - "प्रमाण" के रूप में अन्य स्टैकवर्मफ़्लो उत्तरों के लिंक अप्रासंगिक हैं। इस प्लेटफॉर्म पर कोई भी कुछ भी लिख सकता है। एमडीएन:"This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped"
— बनाम
8
ऐसा लगता है कि इसके xlink:hrefपक्ष में पदावनत किया गया है href। तो यह अभी भी काम कर सकता है।
— बेंजामिन इंटल
20

आपको सबसे पहले SVG को HTML DOM में इंजेक्ट करना होगा।

SVGInject नामक एक ओपन सोर्स लाइब्रेरी है जो आपके लिए ऐसा करती है। यह onloadइंजेक्शन को ट्रिगर करने के लिए विशेषता का उपयोग करता है ।

यहाँ SVGInject का उपयोग करके एक न्यूनतम उदाहरण दिया गया है:

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

छवि लोड होने के बाद onload="SVGInject(this)इंजेक्शन को ट्रिगर करेगा और <img>तत्व को srcविशेषता में प्रदान की गई एसवीजी फ़ाइल की सामग्री से बदल दिया जाएगा ।

यह एसवीजी इंजेक्शन के साथ कई मुद्दों को हल करता है:

  1. इंजेक्शन खत्म होने तक एसवीजी छिपाए जा सकते हैं। यह महत्वपूर्ण है अगर एक शैली पहले से ही लोड समय के दौरान लागू की जाती है, जो अन्यथा एक संक्षिप्त "अस्थिर सामग्री फ्लैश" का कारण बनेगी।

  2. <img>तत्वों खुद को स्वचालित रूप से इंजेक्षन। यदि आप एसवीजी को गतिशील रूप से जोड़ते हैं, तो आपको इंजेक्शन फ़ंक्शन को फिर से कॉल करने के बारे में चिंता करने की ज़रूरत नहीं है।

  3. यदि एसवीजी को एक से अधिक बार इंजेक्ट किया जाता है, तो दस्तावेज़ में एक ही आईडी होने से बचने के लिए एसवीजी में प्रत्येक आईडी में एक यादृच्छिक स्ट्रिंग जोड़ा जाता है।

SVGInject सादा जावास्क्रिप्ट है और सभी ब्राउज़रों के साथ काम करता है जो SVG का समर्थन करते हैं।

अस्वीकरण: मैं SVGInject का सह-लेखक हूं

— Waruyama
स्रोत
3
यह सबसे सीधा जवाब है। मैंने इसे क्रोम, फ़ायरफ़ॉक्स और एज में टेस्ट किया और यह पूरी तरह से काम करता है।
— सेबास्टियन लोरियन
15

@ प्रवीण का जवाब ठोस है।

मैं इसे अपने काम में जवाब नहीं दे पाया, इसलिए मैंने इसके लिए एक jquery होवर फ़ंक्शन किया।

सीएसएस

.svg path {
   transition:0.3s all !important;
}

जेएस / JQuery

// code from above wrapped into a function
replaceSVG();

// hover function
// hover over an element, and find the SVG that you want to change
$('.element').hover(function() {
    var el = $(this);
    var svg = el.find('svg path');
    svg.attr('fill', '#CCC');
}, function() {
    var el = $(this);
    var svg = el.find('svg path');
    svg.attr('fill', '#3A3A3A');
});
— मैट वुजेक
स्रोत
1
यह केवल तभी काम नहीं करेगा यदि एसवीजी को शुरू करने के लिए इनलाइन था?
— डैनियल थॉम्पसन
हां-लेकिन अगर आप कई एसवीजी फाइलों के साथ काम कर रहे हैं या उन्हें नियमित रूप से अपडेट कर रहे हैं, तो यह प्रबंधन करने के लिए एक दर्द है।
— मैट वुजेक
15

क्यों अपनी svg छवि या छवियों के साथ एक webfont नहीं बनाते हैं, css में webfont आयात करते हैं और फिर बस css रंग विशेषता का उपयोग करके ग्लिफ़ के रंग को बदलते हैं? कोई जावास्क्रिप्ट की जरूरत है

— ग़ैरमुल्की
स्रोत
5
यदि आपके svg में अलग-अलग रंगों के कई तत्व हैं, तो यह घोल बहुत हैकी हो जाता है (कई तत्व परस्पर जुड़ जाते हैं)।
— काकजा
1
@ काकाजा यह केवल उन सदिश छवियों के लिए एक समाधान है जिनके पास 1 रंग है। अधिक विवरणों के लिए bpulecio का उत्तर देखें
— gringo
1
क्योंकि आइकन टेक्स्ट नहीं है। फ़ॉन्ट्स पाठ के लिए हैं। Svgs प्रतीक के लिए हैं।
— लजार लुजुबेनोविक
2
@ LazarLjubenović - तकनीकी रूप से पाठ ऐसे वर्णों से बना है जो प्रतीक हैं, और चिह्न भी प्रतीक हैं, यही कारण है कि कई को आइकन-फोंट का उपयोग करने में समस्या नहीं होती है। यह सिर्फ "एक और" पाठीय भाषा बनाने जैसा है। मंदारिन "आइकन" का उपयोग करता है और अक्षरों का भी नहीं, "टेक्स्ट" के रूप में आइकन का उपयोग करने के लिए मानवता में असामान्य नहीं है
— vsync
1
जबकि यह एक दिलचस्प समाधान के रूप में लगता है, मैं वास्तव में "कुछ भी नहीं" के बजाय "कैसे" नहीं के जवाब को विस्तृत करने की सलाह देता हूं
— याकॉव
15

यह उत्तर https://stackoverflow.com/a/24933495/3890888 पर आधारित है, लेकिन वहां लिपि के एक सादे जावास्क्रिप्ट संस्करण के साथ है।

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

/*
 * Replace all SVG images with inline SVG
 */
document.querySelectorAll('img.svg').forEach(function(img){
    var imgID = img.id;
    var imgClass = img.className;
    var imgURL = img.src;

    fetch(imgURL).then(function(response) {
        return response.text();
    }).then(function(text){

        var parser = new DOMParser();
        var xmlDoc = parser.parseFromString(text, "text/xml");

        // Get the SVG tag, ignore the rest
        var svg = xmlDoc.getElementsByTagName('svg')[0];

        // Add replaced image's ID to the new SVG
        if(typeof imgID !== 'undefined') {
            svg.setAttribute('id', imgID);
        }
        // Add replaced image's classes to the new SVG
        if(typeof imgClass !== 'undefined') {
            svg.setAttribute('class', imgClass+' replaced-svg');
        }

        // Remove any invalid XML tags as per http://validator.w3.org
        svg.removeAttribute('xmlns:a');

        // Check if the viewport is set, if the viewport is not set the SVG wont't scale.
        if(!svg.getAttribute('viewBox') && svg.getAttribute('height') && svg.getAttribute('width')) {
            svg.setAttribute('viewBox', '0 0 ' + svg.getAttribute('height') + ' ' + svg.getAttribute('width'))
        }

        // Replace image with new SVG
        img.parentNode.replaceChild(svg, img);

    });

});

और फिर, अब अगर तुम करते हो:

.logo-img path {
  fill: #000;
}

या हो सकता है:

.logo-img path {
  background-color: #000;
}

JSFiddle: http://jsfiddle.net/erxu0dzz/1/

— Seb3736
स्रोत
1
अद्भुत काम करता है। इसके अलावा अगर हमारे पेज में कई svgs हैं तो हमें IIFE में भ्रूण ब्लॉक लाना होगा।
— संदीप शर्मा
1
महान! ES6 के साथ अच्छी तरह से काम करता है। यदि आप IE 9 के बारे में परवाह नहीं करते हैं, तो आप भी उपयोग कर सकते हैं: parser.parseFromString(text, "image/svg+xml");
— ChristoKiwi
IOS 9.3.5 पर UIWebView में काम नहीं करता है। मुझे लगता है कि इसका उपयोग fetchसफारी में 10.1 ( developer.mozilla.org/en-US/docs/Web/API/Fetch_API ) में जोड़े जाने के कारण हो सकता है । ऊपर jQuery का संस्करण काम करता है।
— मारिया-इनेस कैरेरा
7

किसी भी रंग में बदलने के लिए फ़िल्टर का उपयोग करें।

मुझे हाल ही में यह समाधान मिला है, और आशा है कि कोई इसका उपयोग करने में सक्षम हो सकता है। चूंकि समाधान फिल्टर का उपयोग करता है, इसलिए इसका उपयोग किसी भी प्रकार की छवि के साथ किया जा सकता है। सिर्फ svg नहीं।

यदि आपके पास एक एकल-रंग की छवि है जिसे आप केवल रंग बदलना चाहते हैं, तो आप कुछ फिल्टर की मदद से ऐसा कर सकते हैं। यह बेशक बहुरंगा छवियों पर काम करता है, लेकिन आप एक विशिष्ट रंग को लक्षित नहीं कर सकते। केवल पूरी छवि।

फिल्टर केवल सीएसएस फिल्टर का उपयोग करके किसी भी दिए गए रंग में काले रंग को बदलने के लिए प्रस्तावित स्क्रिप्ट से आया है। यदि आप किसी भी रंग को सफेद बदलना चाहते हैं, तो आप प्रत्येक फ़िल्टर में इनवर्ट मान को समायोजित कर सकते हैं।

.startAsBlack{
  display: inline-block;
  width: 50px;
  height: 50px;
  background: black;
}

.black-green{
  filter: invert(43%) sepia(96%) saturate(1237%) hue-rotate(88deg) brightness(128%) contrast(119%);
}

.black-red{
  filter: invert(37%) sepia(93%) saturate(7471%) hue-rotate(356deg) brightness(91%) contrast(135%);
}

.black-blue{
  filter: invert(12%) sepia(83%) saturate(5841%) hue-rotate(244deg) brightness(87%) contrast(153%);
}

.black-purple{
  filter: invert(18%) sepia(98%) saturate(2657%) hue-rotate(289deg) brightness(121%) contrast(140%);
}
Black to any color: <br/>
<div class="startAsBlack black-green"></div>
<div class="startAsBlack black-red"></div>
<div class="startAsBlack black-blue"></div>
<div class="startAsBlack black-purple"></div>
स्निपेट का विस्तार करें

— JasperZelf
स्रोत
4

@Gringo उत्तर पर विस्तार करने के लिए, अन्य उत्तरों में वर्णित जावास्क्रिप्ट विधि काम करती है, लेकिन उपयोगकर्ता को अनावश्यक छवि फ़ाइलों को डाउनलोड करने की आवश्यकता होती है, और IMO, यह आपके कोड को ब्लॉट करता है।

मुझे लगता है कि एक वेब-फाइल पर सभी 1-रंग वेक्टर ग्राफिक्स को स्थानांतरित करने के लिए एक बेहतर दृष्टिकोण होगा। मैंने फोर्ट विस्मयकारी रूप से अतीत में उपयोग किया है , और यह आपके कस्टम आइकन / छवियों को एसवीजी प्रारूप में संयोजित करने के लिए बहुत अच्छा काम करता है, साथ ही किसी भी 3 पार्टी आइकन के साथ आप एक ही वेबफॉन्ट फ़ाइल में (फ़ॉन्ट विस्मयकारी, बूटस्ट्रैप आइकन, आदि) का उपयोग कर सकते हैं। उपयोगकर्ता को डाउनलोड करना होगा। आप इसे कस्टमाइज़ भी कर सकते हैं, इसलिए आप केवल उस 3 पार्टी आइकन को शामिल करें जिसका आप उपयोग कर रहे हैं। यह पृष्ठ द्वारा किए जाने वाले अनुरोधों की संख्या को कम करता है, और आप समग्र पृष्ठ भार हैं, खासकर यदि आप पहले से ही किसी भी 3 पार्टी आइकन पुस्तकालयों को शामिल कर रहे हैं।

यदि आप एक अधिक देव उन्मुख विकल्प पसंद करते हैं, तो आप Google "npm svg webfont" कर सकते हैं , और एक नोड मॉड्यूल का उपयोग कर सकते हैं जो आपके पर्यावरण के लिए सबसे उपयुक्त है।

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

— bpulecio
स्रोत
आपको एसवीजी स्प्रिट्स एक कोशिश देना चाहिए। मेरे अनुभव में, वेब-फोंट में ब्राउज़र रिलीज़ के बीच यादृच्छिक मुद्दे हैं। इसे आज़माएँ: fontastic.me - लेकिन SVG स्प्राइट संस्करण का उपयोग करें - और देखें कि आप क्या सोचते हैं। :)
— sheriffderek
4

यदि आप वास्तविक रंग और काले-सफेद के बीच की छवि को बदल रहे हैं, तो आप एक चयनकर्ता को इस प्रकार सेट कर सकते हैं:

{फिल्टर: कोई नहीं;}

और दूसरा:

{filter:grayscale(100%);}
— wcb1
स्रोत
3

सरल..

आप इस कोड का उपयोग कर सकते हैं:

<svg class="logo">
  <use xlink:href="../../static/icons/logo.svg#Capa_1"></use>
</svg>

पहले svg का पथ निर्दिष्ट करें और फिर इसे लिखें ID, इस मामले में "Capa_1"। आप किसी भी एडिटर में इसे खोलकर svg की आईडी प्राप्त कर सकते हैं।

सीएसएस में: 

.logo {
  fill: red;
}
— हमजा जमाल
स्रोत
kabrice, आप इस कोड का उपयोग कर सकते हैं codepen.io/hmzajmal/pen/ZEGvWYa
— Hamza Jamal
2

आपके मामले में मुख्य समस्या यह है कि आप svg को एक <img>टैग से आयात कर रहे हैं जो SVG संरचना को छिपाएगा।

वांछित प्रभाव प्राप्त करने के लिए आपको <svg>टैग के साथ संयोजन का उपयोग <use>करने की आवश्यकता है। इसे काम करने के लिए, आपको idएसवीजी फ़ाइल में जिस पथ का उपयोग करना है , उसे देने की आवश्यकता है, <path id='myName'...>फिर उन्हें <use xlink:href="#myName"/>टैग से पुनर्प्राप्त करने में सक्षम होना चाहिए । नीचे दिए गए स्निप को आज़माएं।

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

ध्यान दें कि #यदि आप SVG को किसी बाहरी स्रोत से लोड करना चाहते हैं (और इसे अपने HTML में एम्बेड नहीं करते हैं) तो आप किसी भी URL को टुकड़े से पहले रख सकते हैं । इसके अलावा, आमतौर पर आप सीएसएस में भरण निर्दिष्ट नहीं करते हैं। fill:"currentColor"एसवीजी के भीतर ही उपयोग करने पर विचार करना बेहतर है। तत्संबंधी तत्व का CSS रंग मान तब उपयोग किया जाएगा।

— फ्लेविन वोल्केन
स्रोत
2

चूंकि एसवीजी मूल रूप से कोड है, आपको केवल सामग्री की आवश्यकता है। मैंने सामग्री प्राप्त करने के लिए PHP का उपयोग किया, लेकिन आप जो चाहें उपयोग कर सकते हैं।

<?php
$content    = file_get_contents($pathToSVG);
?>

फिर, मैंने एक div कंटेनर के अंदर "जैसा है" सामग्री मुद्रित की है

<div class="fill-class"><?php echo $content;?></div>

सीएसएस पर कंटेनर के एसवीजी चिल्ड्स के लिए नियम को निर्धारित करना

.fill-class > svg { 
    fill: orange;
}

मुझे यह सामग्री चिह्न SVG के साथ मिली:

मोज़िला फ़ायरफ़ॉक्स 59.0.2 (64-बिट) लिनक्स

यहां छवि विवरण दर्ज करें

Google Chrome66.0.3359.181 (बिल्डिकल) (64 बिट्स) लिनक्स

यहां छवि विवरण दर्ज करें

ओपेरा 53.0.2907.37 लिनक्स

यहां छवि विवरण दर्ज करें

— बेंजामिन
स्रोत
मैं नीचे नहीं जा सकता, लेकिन कृपया कभी भी ऐसा न करें।
— सैंडर
5
कारण? वैकल्पिक?
— बेंजामिन
ऐसा नहीं करने का मेरा कारण यह है कि यह ब्राउज़र को SVG को कैश करने से रोकता है। इसका विकल्प यहां कुछ अन्य उत्तरों में वर्णित एसवीजी इंजेक्टर का उपयोग करना है। SVG फ़ाइल को अभी भी ब्राउज़र द्वारा कैश किया जाएगा, और इंजेक्ट किए गए SVG को अभी भी CSS से स्टाइल किया जा सकता है। लेकिन मैं आपको निराश नहीं करता।
— सून ट्रन-गुयेन
मैं समझता हूं, लेकिन फिर भी, कैश का उल्लेख नहीं किया गया है। सर्वश्रेष्ठ उत्तर में जावास्क्रिप्ट कोड होता है जिसे हेडर द्वारा पुनः लोड (या नहीं) किया जा सकता है। फ़ाइल नाम लिंक के बाद हैश को समाप्त कर देता है या हैश करता है। डाउनवोट न करने के लिए धन्यवाद, लेकिन मैं अभी भी विश्वास करता हूं कि मेरा जवाब सीएसएस फिल्ट विशेषता के लिए एक एसवीजी को बदलने का प्रयास करता है।
— बेंजामिन
2

यह PHPसंयोजन के साथ उपयोग करने वाले लोगों के लिए मददगार हो सकता है.svg छवियों है कि वे सीएसएस के साथ हेरफेर करने के लिए चाहते हैं।

आप CSS के साथ img टैग के अंदर गुणों को अधिलेखित नहीं कर सकते। लेकिन जब svg source कोड HTML में एम्बेडेड होता है तो आप निश्चित रूप से कर सकते हैं। मैं इस समस्या को एक require_onceफ़ंक्शन के साथ हल करना पसंद करता हूं जहां मैं शामिल हूं.svg.php फ़ाइल । यह एक छवि आयात करने जैसा है लेकिन आप अभी भी CSS के साथ शैलियों को अधिलेखित कर सकते हैं!

पहले svg फ़ाइल शामिल करें:

<?php require_once( '/assets/images/my-icon.svg.php' ); ?>

और इसमें उदाहरण के लिए यह आइकन शामिल है: 

<svg xmlns="http://www.w3.org/2000/svg" width="20.666" height="59.084" viewBox="0 0 20.666 59.084"><g transform="translate(-639.749 -3139)"><path d="M648.536,3173.876c0-2.875-1.725-3.8-3.471-3.8-1.683,0-3.49.9-3.49,3.8,0,3,1.786,3.8,3.49,3.8C646.811,3177.676,648.536,3176.769,648.536,3173.876Zm-3.471,2.341c-.883,0-1.437-.513-1.437-2.341,0-1.971.615-2.381,1.437-2.381.862,0,1.438.349,1.438,2.381,0,1.907-.616,2.339-1.438,2.339Z" fill="#142312"/><path d="M653.471,3170.076a1.565,1.565,0,0,0-1.416.9l-6.558,13.888h1.2a1.565,1.565,0,0,0,1.416-.9l6.559-13.887Z" fill="#142312"/><path d="M655.107,3177.263c-1.684,0-3.471.9-3.471,3.8,0,3,1.766,3.8,3.471,3.8,1.745,0,3.49-.9,3.49-3.8C658.6,3178.186,656.851,3177.263,655.107,3177.263Zm0,6.139c-.884,0-1.438-.514-1.438-2.34,0-1.972.617-2.381,1.438-2.381.862,0,1.437.349,1.437,2.381,0,1.909-.616,2.34-1.437,2.34Z" fill="#142312"/><path d="M656.263,3159.023l-1.49-14.063a1.35,1.35,0,0,0,.329-.293,1.319,1.319,0,0,0,.268-1.123l-.753-3.49a1.328,1.328,0,0,0-1.306-1.054h-6.448a1.336,1.336,0,0,0-1.311,1.068l-.71,3.493a1.344,1.344,0,0,0,.276,1.112,1.532,1.532,0,0,0,.283.262l-1.489,14.087c-1.7,1.727-4.153,4.871-4.153,8.638v28.924a1.339,1.339,0,0,0,1.168,1.49,1.357,1.357,0,0,0,.17.01h17.981a1.366,1.366,0,0,0,1.337-1.366v-29.059C660.414,3163.893,657.963,3160.749,656.263,3159.023Zm-8.307-17.349h4.274l.176.815H647.79Zm9.785,43.634v10.1H642.434v-17.253a4.728,4.728,0,0,1-2.028-4.284,4.661,4.661,0,0,1,2.028-4.215v-2c0-3.162,2.581-5.986,3.687-7.059a1.356,1.356,0,0,0,.4-.819l1.542-14.614H652.1l1.545,14.618a1.362,1.362,0,0,0,.4.819c1.109,1.072,3.688,3.9,3.688,7.059v9.153a5.457,5.457,0,0,1,0,8.5Z" fill="#142312"/></g></svg>

अब हम आसानी से भरने के रंग को सीएसएस के साथ बदल सकते हैं:

svg path {
  fill: blue;
}

मैंने पहले इस समस्या को हल करने की कोशिश की, file_get_contents()लेकिन ऊपर समाधान बहुत तेज है।

— फ्लोरिस
स्रोत
0

जानिए यह एक पुराना सवाल है लेकिन हाल ही में हम एक ही मुद्दे पर आए थे, और हमने इसे सर्वर की तरफ से हल किया। यह एक php विशिष्ट उत्तर है, लेकिन मैं सकारात्मक हूं कि अन्य envs में भी कुछ ऐसा ही है। img टैग का उपयोग करने के बजाय आप svg को svg के रूप में प्राप्त करें।

public static function print_svg($file){
    $iconfile = new \DOMDocument();
    $iconfile->load($file);
    $tag = $iconfile->saveHTML($iconfile->getElementsByTagName('svg')[0]);
    return $tag;
}

अब जब आप फ़ाइल रेंडर करेंगे तो आपको पूरी इनलाइन svg मिल जाएगी

— nechemya ungar
स्रोत
0

अपने कोड संपादक में svg आइकन खोलें और पथ टैग के बाद एक वर्ग जोड़ें:

<path class'colorToChange' ...

आप वर्ग को svg में जोड़ सकते हैं और इस तरह रंग बदल सकते हैं:

codepen

— हमजा जमाल
स्रोत
-2

यदि आपके पास JQuery तक पहुँच है, तो प्रवीण के उत्तर के लिए विस्तार कर सकते हैं एक व्यक्ति अलग-अलग नेस्टेड तत्वों का रंग बदल सकता है

$('svg').find('path, text').css('fill', '#ffffff');

खोज के भीतर, आप विभिन्न तत्वों का उल्लेख कर सकते हैं जिन्हें रंग में बदलने की आवश्यकता है।

— manyu
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.