क्या मैं CSS के साथ svg पथ का भरण रंग बदल सकता हूं?

200

मेरे पास निम्नलिखित कोड हैं:

  <span>
     <svg height="32" version="1.1" width="32" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.0166626px; top: -0.983337px;">
        <desc></desc>
        <defs/>
        <path style="" fill="#333333" stroke="none" d="M15.985,5.972C8.422,5.972,2.289999999999999,10.049,2.289999999999999,15.078C2.289999999999999,17.955,4.302999999999999...............1,27.68,22.274Z"/>
      </svg>&nbsp;
  </span>

क्या सीवीजी पथ के भरण रंग को सीएसएस या कुछ अन्य साधनों के साथ बदलना संभव है, वास्तव में पथ टैग के अंदर इसे बदलने के बिना?

css svg

— सामंथा जेटी स्टार
स्रोत

1

संबंधित उत्तर

— इज़्हाकी

आजकल, आप बाहरी फ़ाइलों को शामिल और स्टाइल कर सकते हैं <symbol>और <use>। इस जवाब को देखें ।

— प्रातः

218

हां, आप एसवीजी को सीएसएस लागू कर सकते हैं, लेकिन आपको एचटीएमएल को स्टाइल करते समय, तत्व से मेल खाना चाहिए। यदि आप इसे सभी SVG रास्तों पर लागू करना चाहते हैं, तो आप उदाहरण के लिए उपयोग कर सकते हैं:

path {
    fill: blue;
}

बाहरी सीएसएस पथ की fillविशेषता को ओवरराइड करने के लिए प्रकट होता है , कम से कम वेबकीट और गेको-आधारित ब्राउज़रों में मैंने परीक्षण किया। बेशक, अगर आप लिखते हैं, कहते हैं, <path style="fill: green">तो यह बाहरी सीएसएस को भी ओवरराइड करेगा।

— निकोलस रिले
स्रोत

7

क्या यह अभी भी क्रोम के साथ काम करता है? मुझे सीएसएस के साथ अपने एसवीजी पथ के रंग को बदलने की कोशिश करने में कठिनाई हो रही है।

— डलास क्लार्क

5

धन्यवाद निकोलस, मुझे विश्वास है कि मुझे इसका कारण मिल गया है। मेरा SVG <img> टैग के माध्यम से पेज में एम्बेड किया गया था, सीएसएस किसी भी सामग्री को संशोधित करने में सक्षम नहीं दिखाई देता है। क्या ये सही है?

— डलास क्लार्क

40

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

— रिकार्डो ज़िया

2

@RicardoZea इसके लिए एक चेतावनी: आप बाहरी SVG फ़ाइल से किसी ऑब्जेक्ट को शामिल कर सकते हैं <use href="external.svg#objId" />और आपका स्थानीय CSS अभी भी कुछ हद तक लागू होगा।

— केन

1

@KenBellows यह सच है, मैंने सीखा है कि अब। एक बात का ध्यान रखें कि हमें CSS में SVG के विशिष्ट गुणों का उपयोग करने की आवश्यकता है अन्यथा यह काम नहीं करेगा। उदाहरण के लिए, आपके द्वारा उपयोग किए fill: #000;जाने वाले पृष्ठभूमि रंग को बदलने के लिए background: #000;।

— रिकार्डो ज़िया

39

यदि आप तत्व में मँडरा करके रंग बदलना चाहते हैं, तो यह कोशिश करें:

path:hover{
  fill:red;
}

— मार्क एस्लुज़ार डायमत
स्रोत

28

यदि आप एसवीजी फ़ाइल के स्रोत कोड में जाते हैं, तो आप भरण गुण को संशोधित करके रंग को बदल सकते हैं।

<svg fill="#3F6078" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
</svg>

अपने पसंदीदा टेक्स्ट एडिटर का उपयोग करें, एसवीजी फ़ाइल खोलें और इसके साथ खेलें।

— सैमुअल रमजान
स्रोत

2

प्रश्न के शब्दांकन के आधार पर तकनीकी रूप से सही "... वास्तव में पथ टैग के अंदर इसे बदलने के बिना अन्य साधन" और ठीक उसी तरह काम किया, जिसकी मुझे आवश्यकता थी। एक उत्थान है!

— ट्रैविस वाटसन

5

यह कैसा उत्तर है? यह सवाल CSS पर है, न कि देशी SVG

— zhuhang.jasper

2

क्या आपके पास अपने स्वयं के श्री जैस्पर का जवाब है?

— सैमुअल रमजान

2

यह उत्तर नहीं है। यह प्रश्न का विरूपण है।

— मई को QMaster

16

आप इस सर्कल को एसवीजी सर्कल के लिए रख दें।

svg:hover circle{
    fill: #F6831D;
    stroke-dashoffset: 0;
    stroke-dasharray: 700;
    stroke-width: 2;
}

— दुलेंद्र सिंह
स्रोत

8

मुझे सीएसएस-ट्रिक्स पर एक अद्भुत संसाधन मिला: https://css-tricks.com/using-svg/

वहाँ समझाया गया समाधान के एक मुट्ठी भर हैं।

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

अपने html में svg फ़ाइल का उपयोग करके जोड़ें <object>; मैंने html विशेषताएँ भी घोषित कीं widthऔर height। इन चौड़ाई और हाइट्स का उपयोग करने से svg डॉक्यूमेंट को स्केल नहीं किया जाता है, मैंने अपने संबद्ध svg css फ़ाइल में टैग के transform: scale(...)लिए css स्टेटमेंट का उपयोग करते हुए चारों ओर काम किया है svg।

<object type="image/svg+xml" data="myfile.svg" width="64" height="64"></object>

अपने svn दस्तावेज़ को संलग्न करने के लिए एक css फ़ाइल बनाएँ। मेरे स्रोत svg पथ को 16px तक बढ़ाया गया था, मैंने इसे चार के एक कारक के साथ 64 तक बढ़ा दिया। इसका केवल एक ही रास्ता था, इसलिए मुझे इसे अधिक विशेष रूप से चुनने की आवश्यकता नहीं थी, हालांकि पथ में एक भरण विशेषता थी इसलिए मुझे !IMPORTANTसीएसएस को मिसाल लेने के लिए मजबूर करने के लिए उपयोग करना पड़ा ।

#svg2 {
    width: 64px; height: 64px;
    transform: scale(4);
}
path {
    fill: #333 !IMPORTANT;
}

<svgस्टाइलशीट को शामिल करने के लिए, अपने टैग को खोलने से पहले अपना लक्ष्य svg फ़ाइल संपादित करें ; ध्यान दें कि href svg फाइल url के सापेक्ष है।

<?xml-stylesheet type="text/css" href="myfile.css" ?>

— ThorSummoner
स्रोत

4

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

icon.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<!-- use symbol instead of defs and g, 
  must add viewBox on symbol just copy yhe viewbox from the svg tag itself
  must add id on symbol
-->
<symbol id="location" viewBox="0 0 430.114 430.114">
  <!-- add all the icon's paths and shapes here -->
  <path d="M356.208,107.051c-1.531-5.738-4.64-11.852-6.94-17.205C321.746,23.704,261.611,0,213.055,0   C148.054,0,76.463,43.586,66.905,133.427v18.355c0,0.766,0.264,7.647,0.639,11.089c5.358,42.816,39.143,88.32,64.375,131.136   c27.146,45.873,55.314,90.999,83.221,136.106c17.208-29.436,34.354-59.259,51.17-87.933c4.583-8.415,9.903-16.825,14.491-24.857   c3.058-5.348,8.9-10.696,11.569-15.672c27.145-49.699,70.838-99.782,70.838-149.104v-20.262   C363.209,126.938,356.581,108.204,356.208,107.051z M214.245,199.193c-19.107,0-40.021-9.554-50.344-35.939   c-1.538-4.2-1.414-12.617-1.414-13.388v-11.852c0-33.636,28.56-48.932,53.406-48.932c30.588,0,54.245,24.472,54.245,55.06   C270.138,174.729,244.833,199.193,214.245,199.193z"/>
</symbol>

icon.html

<svg><use xlink:href="file_path/location.svg#location"></use></svg>

— अहमद हकीम
स्रोत

Stroke किसी भी भरण / आघात को हटा दें ”- भरण और आघात को हटाने से svg's (कम से कम मेरा काम करते समय, मेरे विचार में ऐसा करने पर और पूर्वावलोकन विंडो में परिणाम देखने के लिए) टूट सकता है। वैकल्पिक रूप से एक का उपयोग कर सकते हैंcurrentColor

— फ्रैंक Nocke

4

यह एसवीजी के पथ भरण रंग को बदलना संभव है। सीएसएस स्निपेट के लिए नीचे देखें:

सभी रास्तों के लिए रंग लगाने के लिए: svg > path{ fill: red }
पहले d पथ के लिए आवेदन करने के लिए: svg > path:nth-of-type(1){ fill: green }
दूसरे डी पथ के लिए आवेदन करने के लिए: svg > path:nth-of-type(2){ fill: green}
विभिन्न d पथ के लिए आवेदन करने के लिए, केवल पथ संख्या बदलें:
svg > path:nth-of-type(${path_number}){ fill: green}
कोणीय 2 से 8 में सीएसएस का समर्थन करने के लिए, इनकैप्सुलेशन अवधारणा का उपयोग करें:

:host::ng-deep svg path:nth-of-type(1){
        fill:red;
    }

— Rohinibabu
स्रोत

2

अपने सभी svg में डालें:

fill="var(--svgcolor)"

सीएसएस में:

:root {
  --svgcolor: tomato;
}

छद्म वर्गों का उपयोग करने के लिए:

span.github:hover {
  --svgcolor:aquamarine;
}

व्याख्या

root = html पेज।
- svgcolor = एक चर।
span.github = एक वर्ग तत्व github के साथ एक अवधि तत्व का चयन करना, अंदर एक svg आइकन और छद्म श्रेणी के होवर को असाइन करना।

— नेटो
स्रोत

StackOverflow, Neto में आपका स्वागत है। यह एक अच्छा जवाब लगता है। मदद के लिए धन्यवाद।

— srm