बाहरी सीएसएस के साथ एसवीजी शैली कैसे करें?

102

मेरे पास कई एसवीजी ग्राफिक्स हैं जो मैं अपनी बाहरी शैली की चादरों के रंगों को संशोधित करना चाहता हूं - सीधे प्रत्येक एसवीजी फ़ाइल के भीतर नहीं। मैं ग्राफिक्स को इन-लाइन नहीं डाल रहा हूं, लेकिन उन्हें अपने इमेज फ़ोल्डर में स्टोर कर रहा हूं और उन्हें इंगित कर रहा हूं।

मैंने टूलटिप्स को काम करने की अनुमति देने के लिए उन्हें इस तरह से लागू किया है, और मैंने <a>लिंक को अनुमति देने के लिए टैग में प्रत्येक को लपेटा है ।

<a href='http://youtube.com/...' target='_blank'><img class='socIcon' src='images/socYouTube.svg' title='View my videos on YouTube' alt='YouTube' /></a>

और यहाँ SVG ग्राफिक का कोड है:

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="stylesheets/main.css" type="text/css"?>
<!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" viewBox="0 0 56.69 56.69">
<g>
    <path d="M28.44......./>
</g>
</svg>

मैंने अपनी बाह्य CSS फ़ाइल (main.css) में निम्नलिखित डाला:

.socIcon g {fill:red;}

फिर भी इसका ग्राफिक पर कोई प्रभाव नहीं है। मैंने भी .socIcon g पथ {} और .socIcon पथ {} का प्रयास किया।

कुछ सही नहीं है, शायद मेरा कार्यान्वयन बाहरी सीएसएस संशोधनों की अनुमति नहीं देता है, या मैंने एक कदम याद किया? मैं वास्तव में आपकी मदद की सराहना करता हूँ! मुझे अपनी बाहरी स्टाइलशीट के माध्यम से एसवीजी ग्राफिक के रंगों को संशोधित करने की क्षमता की आवश्यकता है, लेकिन मैं टूलटिप और लिंक की क्षमता को नहीं खो सकता। (हालांकि मैं टूलटिप्स के बिना रहने में सक्षम हो सकता हूं।) धन्यवाद!

html  css  svg  stylesheet  external 
— जॉर्डन एच
स्रोत
— एरिक डाहलस्ट्रॉम्
कोशिश करें svg { fill:red; }या अपने रास्ते को एक वर्ग का नाम दें। जैसे <path class="socIcon" d="M28.44 ..... />यह चाल चलनी चाहिए।
— द्विज

जवाबों:

92

यदि आपका SVG फ़ाइल HTML में इनलाइन शामिल है, तो आपकी main.css फ़ाइल का SVG की सामग्री पर प्रभाव पड़ेगा:

https://developer.mozilla.org/en/docs/SVG_In_HTML_Introduction

<html>
  <body>
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
    <g>
      <path d="M28.44......./>
    </g>
  </svg>
</html>

यदि आप अपने SVG को फाइलों में रखना चाहते हैं, तो CSS को SVG फाइल के अंदर परिभाषित करने की आवश्यकता है।

आप इसे स्टाइल टैग के साथ कर सकते हैं:

http://www.w3.org/TR/SVG/styling.html#StyleElementExample

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width="50px" height="50px" viewBox="0 0 50 50">
  <defs>
    <style type="text/css"><![CDATA[
      .socIcon g {
        fill:red;
      }
    ]]></style>
  </defs>
  <g>
    <path d="M28.44......./>
  </g>
</svg>

आप सक्रिय शैली के आधार पर शैली टैग को अपडेट करने के लिए सर्वर साइड पर एक टूल का उपयोग कर सकते हैं। रूबी में आप इसे नोकोगिरी के साथ हासिल कर सकते थे। एसवीजी सिर्फ एक्सएमएल है। तो शायद कई XML पुस्तकालय उपलब्ध हैं जो शायद इसे प्राप्त कर सकते हैं।

यदि आप ऐसा करने में सक्षम नहीं हैं, तो आपको बस उनका उपयोग करना होगा जैसे कि वे PNG थे; प्रत्येक शैली के लिए एक सेट बनाना और उनकी शैलियों को इनलाइन सहेजना।

— आरजीबी
स्रोत
17
इसका मतलब यह है कि एसवीजी को कैशिंग और विभिन्न स्टाइल को लागू करने से लाभ उठाने की कोई विधि नहीं है? इनलाइन को अच्छी तरह से कैश नहीं लगता है, जबकि अन्य तरीकों से छवि के कई संस्करण बनाने की आवश्यकता होगी, जिससे उन्हें कैशिंग से किसी भी लाभ को समाप्त किया जा सके।
— msg45f
एक और तरीका है कि एसवीजी को बैकग्राउंड-इमेज डेटा यूरिस के रूप में एनकोड करना, प्रत्येक संस्करण पर अलग-अलग रंगों के साथ और दोहराव के कारण फ़ाइल आकार को कम करने के लिए गज़िप पर भरोसा करना।
— रस्किन
1
मेरे मामले में मैं एसवीजी से तत्व शैलियों को ओवरराइड करना चाहता था। मेरे CSS ने काम नहीं किया, क्योंकि तत्व शैलियों में उच्च प्राथमिकता थी। सबसे सरल समाधान यह था कि एसवीजी के लिए सीएसएस शैली में एक महत्वपूर्ण जोड़ दिया गया। तब सब ठीक था। यदि आप महत्वपूर्ण से बचना चाहते हैं, तो आपको सीएसएस में तत्व शैलियों को स्थानांतरित करने की आवश्यकता है।
— डेविड गौसमैन
शर्म की बात है कि आप एक URL से
— क्लेव के
1
@clayRay आप इसे इस तरह से कर पाएंगे कि एक बार SVG2 पूरा ड्राफ्ट हो जाएगा w3.org/TR/SVG2/styling.html#LinkElement
— RGB
51

आप वह कर सकते हैं जो आप चाहते हैं, एक (महत्वपूर्ण) चेतावनी के साथ: आपके प्रतीक के भीतर के रास्तों को बाहरी सीएसएस के माध्यम से स्वतंत्र रूप से स्टाइल नहीं किया जा सकता है - आप केवल इस पद्धति के साथ पूरे प्रतीक के लिए गुण सेट कर सकते हैं। इसलिए, यदि आपके प्रतीक में दो रास्ते हैं और चाहते हैं कि उनके पास अलग-अलग रंग हों, तो यह काम नहीं करेगा, लेकिन यदि आप चाहते हैं कि आपके सभी रास्ते समान हों, तो यह काम करना चाहिए।

अपनी HTML फ़ाइल में, आप कुछ इस तरह चाहते हैं:

<style>
  .fill-red { fill: red; }
  .fill-blue { fill: blue; }
</style>

<a href="//www.example.com/">
  <svg class="fill-red">
    <use xlink:href="images/icons.svg#example"></use>
  </svg>
</a>

और बाहरी SVG फाइल में आप कुछ इस तरह चाहते हैं:

<svg xmlns="http://www.w3.org/2000/svg">
   <symbol id="example" viewBox="0 0 256 256">
    <path d="M120.... />
  </symbol>
</svg>

पर वर्ग स्वैप svgसे टैग (अपने html में) fill-redकरने के लिएfill-blue और टा-डा ... आप लाल के बजाय नीले रंग की है।

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

<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="example" viewBox="0 0 256 256">
    <path class="background" d="M120..." />
    <path class="icon" style="fill: white;" d="M20..." />
  </symbol>
</svg>
— एडम कोरमन
स्रोत
अच्छा जवाब .. मुझे लगता है कि वास्तव में चेतावनी होनी चाहिए: ब्राउज़र समर्थन, हालांकि! अच्छा संदर्भ (caniuse तुलना में अधिक विवरण): css-tricks.com/svg-fragment-identifiers-work
— ptim
यह एक उपाय है! वास्तव में एक symbolतत्व में पूरे svg सामग्री को लपेटने की आवश्यकता नहीं है , यानी आप सिर्फ एक idsvg तत्व को दे सकते हैं , इसलिए: `<svg id = example" xmlns = " w3.org/2000/svg " viewBox = "0" 0 256 256 "> <पथ वर्ग =" पृष्ठभूमि "d =" M120 ... "/> <पथ वर्ग =" आइकन "शैली =" भरण: श्वेत; "d =" M20 ... "/> </ svg > `
— सिमोनएमएसआर
12

आप अपने एसवीजी फ़ाइलों को बाहरी सीएसएस फ़ाइल लिंक का उपयोग करके शामिल कर सकते हैं:

<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="mystyles.css" type="text/css"/>

टैग खोलने के बाद आपको इसे लगाना होगा:

<svg>
  <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="mystyles.css" type="text/css"/>
  <g>
    <path d=.../>
  </g>
</svg>

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

— जसेक ममोट
स्रोत
1
वाह, यह काम करता है, अभी तक केवल 1 upvote ... क्या यह समाधान सभी स्थितियों के लिए अच्छा है? यह इतना आसान है, यह चुना हुआ जवाब क्यों नहीं है?
— ब्रूनो विन्सेंट
पूरे बिंदु आपकी शैली परिभाषाओं को केंद्रीकृत कर रहा है। मान लीजिए कि आपके पास 10 एसवीजी हैं जिन्हें आप स्टाइल करना चाहते हैं। अब आपको सभी एसवीजी में सीएसएस के संदर्भ में कॉपी करने की आवश्यकता है जो प्रभावित होने की आवश्यकता है। और अगर आपके सीएसएस का फ़ाइल नाम / स्थान बदलता है, तो आपको इसे 10 एसवीजी में अपडेट करना होगा। एक सीएसएस वर्ग एक भौतिक सीएसएस फ़ाइल के संदर्भ की तुलना में बहुत अधिक प्रतीकात्मक महसूस करता है।
— Frans
ध्यान दें कि एक <img> टैग के माध्यम से लोड किए गए svg बाहरी सामग्री (जैसे, स्टाइलशीट) को लोड नहीं करेगा ।
— मूस मोरल्स
7

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

<object id="dynamic-svg" type="image/svg+xml" data="your-svg.svg">
    Your browser does not support SVG
</object>
<script>
    var svgHolder = document.querySelector('object#dynamic-svg');
    svgHolder.onload = function () {
        var svgDocument = svgHolder.contentDocument;
        var style = svgDocument.createElementNS("http://www.w3.org/2000/svg", "style");

        // Now (ab)use the @import directive to load make the browser load our css
        style.textContent = '@import url("/css/your-dynamic-css.css");';

        var svgElem = svgDocument.querySelector('svg');
        svgElem.insertBefore(style, svgElem.firstChild);
    };
</script>

यदि आप चाहते हैं कि आप जावास्क्रिप्ट को PHP में गतिशील रूप से उत्पन्न कर सकते हैं - यह तथ्य कि जावास्क्रिप्ट में यह संभव है, संभावनाओं का असंख्य खोल देता है।

— पीट
स्रोत
हे, मैं वास्तव में आपको समाधान पसंद करता हूं और यह काम कर रहा है, लेकिन मुझे अपने बैठने पर इसे अपनाने की आवश्यकता है यदि आप ओएस कोर्स में मदद करने के लिए तैयार हैं, तो मेरे अंदर <defs> एक शैली टैग है जो मैं उन्हें मैन्युअल रूप से हटा सकता हूं और इस कोड को चला सकता हूं ताकि यह पैदा होगा एक शैली है, क्या कोई ऐसा तरीका है जिससे मैं दोषों को हटा सकता हूं, जैसे आपने किया था या फिर इसे अपडेट करने के लिए तत्व को फिर से बनाएं, और यह भी पाया गया कि url को कोई त्रुटि नहीं मिली है, जिसे आप परिभाषित नहीं कर सकते, कृपया मदद करें, धन्यवाद
— Kamel Mili
6

एक दृष्टिकोण जिसे आप ले सकते हैं वह है ब्राउज़र में एसवीजी ग्राफिक्स की उपस्थिति को बदलने के लिए सीएसएस फिल्टर का उपयोग करना।

उदाहरण के लिए, यदि आपके पास एक एसवीजी ग्राफिक है जो एसवीजी कोड के भीतर लाल रंग के रंग का उपयोग करता है, तो आप इसे 180 डिग्री के ह्यू-रोटेट सेटिंग के साथ बैंगनी कर सकते हैं:

#theIdOfTheImgTagWithTheSVGInIt {
    filter: hue-rotate(180deg);
    -webkit-filter: hue-rotate(180deg);
    -moz-filter: hue-rotate(180deg);
    -o-filter: hue-rotate(180deg);
    -ms-filter: hue-rotate(180deg);
}

अपने इच्छित रंगों को खोजने के लिए अन्य ह्यू-रोटेट सेटिंग्स के साथ प्रयोग करें।

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

और ध्यान दें कि यह उन ग्राफिक्स के साथ काम नहीं करेगा जिनके पास काले या सफेद या ग्रे रंग का है। उस रंग के रंग को घुमाने के लिए आपके पास एक वास्तविक रंग होना चाहिए।

— साइमन व्हाइट
स्रोत
4

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

यह उदाहरण एक वर्ग को जड़ से जोड़ेगा <svg> मूल तत्व पर क्लिक करने पर टैग में ।

file.svg:

<?xml-stylesheet type="text/css" href="../svg.css"?>
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="">
  <g>
   <path/>
  </g>
 </svg>

html:

<a class="parent">
  <object data="file.svg"></object>
</a>

जक्वरी:

$(function() {
  $(document).on('click', '.parent', function(){
    $(this).find('object').contents().find('svg').attr("class","selected");
  }
});

मूल तत्व पर क्लिक करें:

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="" class="selected">

तब आप अपने सीएसएस का प्रबंधन कर सकते हैं

svg.css:

path {
 fill:none;
 stroke:#000;
 stroke-miterlimit:1.41;
 stroke-width:0.7px;
}

.selected path {
 fill:none;
 stroke:rgb(64, 136, 209);
 stroke-miterlimit:1.41;
 stroke-width:0.7px;
}
— vhanahrni
स्रोत
काम करने के लिए प्रतीत नहीं होता है, क्या आप एक काम करने का उदाहरण जोड़ सकते हैं?
— जीनलूका स्कल्जेरी
4

बाहरी svg छवियों को पहले इनलाइन करके करना संभव होना चाहिए। नीचे दिया गया कोड जेस फ्रैजेल द्वारा इनवैलिड एसवीजी के साथ सभी एसवीजी छवियों को बदलने से आता है ।

$('img.svg').each(function(){
  var $img = $(this);
  var imgID = $img.attr('id');
  var imgClass = $img.attr('class');
  var imgURL = $img.attr('src');
  $.get(imgURL, function(data) {
    // Get the SVG tag, ignore the rest
    var $svg = $(data).find('svg');
    // Add replaced image's ID to the new SVG
    if (typeof imgID !== 'undefined') {
      $svg = $svg.attr('id', imgID);
    }
    // Add replaced image's classes to the new SVG
    if (typeof imgClass !== 'undefined') {
      $svg = $svg.attr('class', imgClass+' replaced-svg');
    }
    // Remove any invalid XML tags as per http:validator.w3.org
    $svg = $svg.removeAttr('xmlns:a');
    // Replace image with new SVG
    $img.replaceWith($svg);
  });
});
— सिंह
स्रोत
3
यह नोट करने के लिए आयात है कि यह केवल तभी काम करेगा जब आपके पास HTML के समान डोमेन पर होस्ट की गई छवि हो, या छवि सर्वर पर विशेष रूप से कॉन्फ़िगर की गई क्रॉसडोमेन नीति हो। $ .get ajax का उपयोग करेगा और यदि कोई मान्य अनुमति-पहुँच हैडर नहीं है तो बाहरी सर्वर से छवि को लोड करने में विफल रहता है
— user151496
यह पौराणिक कथा है
— टीनो कोस्टा 'एल नीनो'
2

जब एक <image>टैग में उपयोग किया जाता है तो एसवीजी को गोपनीयता कारणों से एक ही फाइल में शामिल किया जाना चाहिए। इस Bugzilla बग पर अधिक विवरण है कि ऐसा क्यों है। दुर्भाग्य से आप एक अलग टैग का उपयोग नहीं कर सकते हैं <iframe>क्योंकि यह एक लिंक के रूप में काम नहीं करेगा ताकि आपको CSS को एक में एम्बेड करना पड़े<style> फ़ाइल के भीतर टैग ।

ऐसा करने का एक अन्य तरीका मुख्य HTML फ़ाइल में SVG डेटा होना चाहिए

<a href='http://youtube.com/...' target='_blank'>
  <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
    <g>
        <path d="M28.44......./>
    </g>
  </svg>
</a>

आप HTML <link>टैग का उपयोग करके बाहरी CSS फ़ाइल के साथ शैली बना सकते हैं ।

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

"मैं वास्तव में इन छवियों के रंगों को बदलने जा रहा हूं जो उपयोगकर्ता ने मेरी साइट के लिए किस रंग योजना के आधार पर चुना है।" - जॉर्डन 10 घंटे पहले

मेरा सुझाव है कि आप इसके लिए PHP का उपयोग करें। आइकन फोंट के बिना ऐसा करने का वास्तव में कोई बेहतर तरीका नहीं है, और यदि आप उनका उपयोग करने का विरोध करते हैं, तो आप यह कोशिश कर सकते हैं:

<?php

    header('Content-Type: image/svg+xml');
    echo '<?xml version="1.0" encoding="utf-8"?>';
    $color = $_GET['color'];

?>
<!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" viewBox="0 0 56.69 56.69">
    <g>
        <path fill="<?php echo $color; ?>" d="M28.44..."/>
    </g>
</svg>

और बाद में आप filename.php?color=#ffffffवांछित फ़ाइल में svg फ़ाइल प्राप्त करने के लिए इस फ़ाइल का उपयोग कर सकते हैं ।

— SeinopSys
स्रोत
6
ध्यान दें कि यह कोड उपयोगकर्ता इनपुट की जांच नहीं करता है - कुछ भी रंग के रूप में आपूर्ति की जा सकती है और आपके एसवीजी को कुछ बहुत ही रोचक तरीकों से प्रदान किया जा सकता है ... यकीन नहीं कि यह आपको प्रभावित करता है, लेकिन आपको उपयोगकर्ता इनपुट को हमेशा के लिए सत्यापित करना चाहिए । कुछ इस तरह से मदद मिलेगी: if (!preg_match('/^[#][0-9a-f]{6}$/i', $_GET['color'])) die('Oops!');(इसे शुरू PHP ब्लॉक में कहीं डाल दिया)।
— जॉन्डोडो
1

मेरे लिए क्या काम करता है: शैली टैग @import नियम के साथ

<defs>
    <style type="text/css">
        @import url("svg-common.css");
    </style>
</defs>
— Fordi
स्रोत
1

मैं इसकी एक पुरानी पोस्ट जानता हूं, लेकिन इस समस्या को दूर करने के लिए ... आप सिर्फ गलत जगह पर अपनी कक्षाओं का उपयोग कर रहे हैं: डी

सबसे पहले आप उपयोग कर सकते हैं 

svg { fill: red; }

अपने में main.cssयह लाल पाने के लिए। इसका असर होता है। आप विशिष्ट रास्तों को प्राप्त करने के लिए संभावित रूप से नोड चयनकर्ताओं का उपयोग कर सकते हैं।

दूसरी बात यह है कि आपने वर्ग को -Tag घोषित कर दिया img।

<img class='socIcon'....

आपको वास्तव में इसे अपने एसवीजी के अंदर घोषित करना चाहिए। यदि आपके पास अलग-अलग रास्ते हैं, तो आप निश्चित रूप से अधिक परिभाषित कर सकते हैं।

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="stylesheets/main.css" type="text/css"?>
<!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" viewBox="0 0 56.69 56.69">
<g>
    <path class="myClassForMyPath" d="M28.44......./>
</g>
</svg>

अब आप अपनी main.cssतरह से रंग बदल सकते हैं

.myClassForMyPath {
    fill: yellow;
}
— Dwza
स्रोत
कोशिश की, यह काम नहीं करता है, जैसे कि कई अन्य उत्तर पहले से ही कहते हैं। आप एसवीजी के अंदर की कक्षाओं के लिए स्टाइल लागू नहीं कर सकते।
— फ्रांसेस
@Frans आप एक फ़ाइल के रूप में एक svg सहित हैं या क्या आपके पास ऊपर के उदाहरण में अपना svg स्रोत है? क्योंकि मेरे मन में है कि यह इस बात पर निर्भर करता है कि आप svg का उपयोग कैसे करते हैं। सहित img अभ्यस्त काम करते हैं।
— द्विज
वास्तव में, यह केवल तभी काम करता है जब आप अपने HTML में SVG को इनलाइन करते हैं। लेकिन यह वह नहीं है जो आपका उदाहरण करता है। यह एक बाहरी (यानी इनलाइन नहीं) एसवीजी का उपयोग करता है। ऐसा लगता है कि आपके HTML में CSS के साथ बाहरी SVG को स्टाइल करने का कोई तरीका नहीं है।
— Frans
सुनिश्चित करें कि आपने मेरा उदाहरण सही करने की कोशिश की? मेरा मतलब है, बाहरी से एक सीएसएस फ़ाइल शामिल है? <?xml-stylesheet href="stylesheets/main.css" type="text/css"?>
— द्विज
ठीक है, अब मैं देखता हूं, आपके एसवीजी के अंदर एक <?xml-stylesheet ... ?>घोषणा है । मुझे लगता है कि काम करेगा। यह <link rel="stylesheet" ... >एसवीजी के अंदर की सिफारिश करने वाले अन्य उत्तरों के समान है । इसमें भी समान समस्याएं हैं (आपको स्टाइलशीट को इंगित करने के लिए हर एक एसवीजी को अपडेट करने की आवश्यकता है, और स्टाइलशीट के नाम या स्थान में किसी भी बदलाव का मतलब है कि सभी एसवीजी को फिर से बदलना होगा)।
— Frans
1
  1. बाहरी शैलियों के लिए

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">

  <style>
	@import url(main.css);
  </style>

  <g>
    <path d="M28.44......./>
  </g>
</svg>
स्निपेट का विस्तार करें

  1. आंतरिक शैलियों के लिए

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">

  <style>
	    .socIcon g {fill:red;}
  </style>

  <g>
    <path d="M28.44......./>
  </g>
</svg>
स्निपेट का विस्तार करें

नोट: यदि आप एसवीजी को <img>टैग के अंदर शामिल करते हैं तो बाहरी शैलियाँ काम नहीं करेंगी । यह पूरी तरह से <div>टैग के अंदर काम करेगा

— युवराज पाटिल
स्रोत
0

@ लेओ यहां कोणीयजेएस संस्करण है, फिर से धन्यवाद 

G.directive ( 'imgInlineSvg', function () {

return {
    restrict : 'C',
    scope : true,
    link : function ( scope, elem, attrs ) {

        if ( attrs.src ) {

            $ ( attrs ).each ( function () {
                var imgID    = attrs.class;
                var imgClass = attrs.class;
                var imgURL   = attrs.src;

                $.get ( imgURL, function ( data ) {

                    var $svg = $ ( data ).find ( 'svg' );
                    if ( typeof imgID !== 'undefined' ) {
                        $svg = $svg.attr ( 'id', imgID );
                    }

                    if ( typeof imgClass !== 'undefined' ) {
                        $svg = $svg.attr ( 'class', imgClass + ' replaced-svg' );
                    }

                    $svg = $svg.removeAttr ( 'xmlns:a' );

                    elem.replaceWith ( $svg );

                } );

            } );
        }

    }

}

} );
— टीनो कोस्टा 'एल नीनो'
स्रोत
-1

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

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