एसवीजी ग्रेडिएंट सीएसएस का उपयोग करते हुए

Question

मैं एक एसवीजी rectतत्व पर लागू ढाल प्राप्त करने की कोशिश कर रहा हूं ।

वर्तमान में, मैं fillविशेषता का उपयोग कर रहा हूं । मेरी CSS फ़ाइल में:

rect {
    cursor: pointer;
    shape-rendering: crispEdges;
    fill: #a71a2e;
}

और rectतत्व में सही भरण रंग होता है जब ब्राउज़र में देखा जाता है।

हालाँकि, मैं जानना चाहूंगा कि क्या मैं इस तत्व के लिए एक रैखिक ढाल लागू कर सकता हूं?

Answer 1

सीएसएस में जो भी आप एक में उपयोग करेंगे बस का उपयोग करें fill विशेषता । बेशक, इसके लिए आवश्यक है कि आपने अपने एसवीजी में कहीं-कहीं रैखिक ढाल को परिभाषित किया हो।

यहाँ एक पूर्ण उदाहरण है:

rect {
    cursor: pointer;
    shape-rendering: crispEdges;
    fill: url(#MyGradient);
}

<svg width="100" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <style type="text/css">
        rect{fill:url(#MyGradient)}
      </style>
      <defs>
        <linearGradient id="MyGradient">
          <stop offset="5%" stop-color="#F60" />
          <stop offset="95%" stop-color="#FF6" />
        </linearGradient>
      </defs>
      
      <rect width="100" height="50"/>
    </svg>

Comments

इसलिए मैंने उस ढाल को एक अलग फ़ाइल में बनाया, और fillइस तरह से उपयोग किया fill: url(../js/gradient.svg#MyGradient);:। क्या यह सही तरीका है?

— हृषिकेश चौधरी

@ हृषिकेशचौधरी: हां, यह सही है, लेकिन क्रोम और मुझे लगता है कि सफारी के साथ-साथ अन्य फाइलों के संदर्भ तत्वों का समर्थन नहीं करते। IE9 के बारे में निश्चित नहीं है (अभी परीक्षण नहीं कर सकता, बस इसे आज़माएं)।

— थॉमस डब्ल्यू

किसी को भी, जो इसे पढ़ता है और पूछता है "क्या होता है fill: linear-gradient (...)?" fillएक की आवश्यकता है <paint>जो CSS2 <color>वर्ग के आसपास बनाया गया है । दूसरे शब्दों में, यह उत्तर वर्तमान में सीएसएस के माध्यम से करने का एकमात्र तरीका है जिस समय मैं यह टिप्पणी लिख रहा हूं। आपको एक linearGradientतत्व जोड़ने की आवश्यकता है । अंत में, एसवीजी 2 के लिए डब्ल्यू 3 वर्किंग ड्राफ्ट के माध्यम से जा रहा है , यह linear-gradientभरण सीएसएस नियम के लिए समर्थन प्रकट करता है और इसे कल्पना में नहीं बना सकता है।

— आर्थर वेबर्ग

इस मामले में दिशा कैसे बदलें?

— अगेम्प्लेयर

@AwQiruiGuo MDN (विशेष रूप से gradientTransformविशेषता) पर एक नज़र

— थॉमस डब्ल्यू

Answer 2

2019 उत्तर

ब्रांड के नए सीएसएस गुणों के साथ आप चर उर्फ ​​के साथ और भी अधिक लचीलापन रख सकते हैं custom properties

.shape {
  width:500px;
  height:200px;
}

.shape .gradient-bg {
  fill: url(#header-shape-gradient) #fff;
}

#header-shape-gradient {
  --color-stop: #f12c06;
  --color-bot: #faed34;
}

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" class="shape">
  <defs>
    <linearGradient id="header-shape-gradient" x2="0.35" y2="1">
        <stop offset="0%" stop-color="var(--color-stop)" />
        <stop offset="30%" stop-color="var(--color-stop)" />
        <stop offset="100%" stop-color="var(--color-bot)" />
      </linearGradient>
  </defs>
  <g>
    <polygon class="gradient-bg" points="0,0 100,0 0,66" />
  </g>
</svg>

बस stopग्रेडिएंट में प्रत्येक के लिए एक नामित चर सेट करें और फिर सीएसएस में जैसे चाहें अनुकूलित करें। आप जावास्क्रिप्ट के साथ उनके मूल्यों को गतिशील रूप से भी बदल सकते हैं, जैसे:

document.querySelector('#header-shape-gradient').style.setProperty('--color-stop', "#f5f7f9");

Comments

IE में समर्थित नहीं है।

— एकोकेन

सीएसएस कस्टम गुण बहुत लंबे समय के लिए यहां हैं, अगर किसी तरह अभी तक कोई भी उन्हें उपयोग करने के लिए तैयार नहीं है, तो वह परिवर्तनों के लिए कभी तैयार नहीं होगा।

— मैकीज क्वैस

@MaciejKwas, आप गलत हैं। पुराने ब्राउज़र हमेशा के लिए नहीं रहते हैं, इसलिए जो कंपनियां अभी तैयार नहीं हैं, वे तब तैयार होंगी। और अगर कोई अपने दर्शकों के एक हिस्से को छोड़ने के लिए तैयार नहीं है, तो इसका मतलब यह नहीं है कि वह बदलावों के लिए तैयार नहीं है, इसका मतलब है कि वह बड़े दर्शकों को रखने के लिए बाद में परिवर्तनों का लाभ उठाना पसंद करता है।

— चालाकी

@aoakeson IE मर चुका है। जीवन का अंत। एज भी मर रहा है, यह 2019 का जवाब है, इसलिए IE को गिनना नहीं चाहिए। IE एक ठोस रंग का उपयोग करके शान से नीचा दिखा सकता है।

— सिप्रियन

@aoakeson मैं आश्चर्यजनक रूप से 2019 में उस तरह की प्रतिक्रिया से आश्चर्यचकित हूं। आप इस स्तर पर IE में SVG समर्थन मानने के लिए एक डेवलपर के रूप में अनुभवहीन होंगे, कभी भी इसका समर्थन किया जाएगा, तो अकेले SO पर एक उभरते हुए डेवलपर को आपको एक फूला हुआ जवाब दें। , यदि आप IE का समर्थन करने का इरादा रखते हैं, तो अनावश्यक रूप से आवश्यक कुछ के लिए पॉलीफ़िल्ड उत्तर।

— जेम्स मार्टिन-डेविस

Answer 3

Finesse ने जो लिखा उसके शीर्ष पर बिल्डिंग, यहाँ svg को लक्षित करने और इसे बदलने के लिए एक सरल तरीका है।

यह वह है जो आपको करना जरूरी है:

1. प्रत्येक रंग वर्गों को असाइन करें ग्रेडिएंट तत्व में परिभाषित।
2. सीएसएस को लक्षित करें और सादे कक्षाओं का उपयोग करके प्रत्येक स्टॉप के लिए स्टॉप-रंग बदलें।
3. जीत!

इसके बजाय कक्षाओं का उपयोग करने के कुछ लाभ :nth-childयह है कि यदि आप अपने स्टॉप को फिर से व्यवस्थित करते हैं तो यह प्रभावित नहीं होगा। इसके अलावा, यह प्रत्येक वर्ग के इरादे को स्पष्ट करता है - आपको यह सोचकर छोड़ दिया जाएगा कि क्या आपको पहले बच्चे पर नीला रंग चाहिए या दूसरा।

मैंने इसे सभी क्रोम, फ़ायरफ़ॉक्स और IE11 पर परीक्षण किया है:

.main-stop {
  stop-color: red;
}
.alt-stop {
  stop-color: green;
}

<svg class="green" width="100" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <linearGradient id="gradient">
    <stop class="main-stop" offset="0%" />
    <stop class="alt-stop" offset="100%" />
  </linearGradient>
  <rect width="100" height="50" fill="url(#gradient)" />
</svg>

एक संपादन योग्य उदाहरण यहाँ देखें: https://jsbin.com/gabuvisuhe/edit?html,css,output

Comments

कमी यह है कि आप यह सुनिश्चित करने के लिए नहीं जानते हैं कि स्टॉप क्लास के नाम क्या हैं और उनके पास क्या ऑर्डर है। वास्तव में, समाधान समान हैं, केवल अंतर सीएसएस चयनकर्ताओं का है।

— चालाकी

मुझे लगता है कि यह ओपीएस प्रश्न का सबसे अच्छा आधुनिक उत्तर है।

— मौलिक

Answer 4

यहां एक समाधान है जहां आप एक ढाल जोड़ सकते हैं और केवल सीएसएस का उपयोग करके इसके रंग बदल सकते हैं:

// JS is not required for the solution. It's used only for the interactive demo.
const svg = document.querySelector('svg');
document.querySelector('#greenButton').addEventListener('click', () => svg.setAttribute('class', 'green'));
document.querySelector('#redButton').addEventListener('click', () => svg.setAttribute('class', 'red'));

svg.green stop:nth-child(1) {
  stop-color: #60c50b;
}
svg.green stop:nth-child(2) {
  stop-color: #139a26;
}

svg.red stop:nth-child(1) {
  stop-color: #c84f31;
}
svg.red stop:nth-child(2) {
  stop-color: #dA3448;
}

<svg class="green" width="100" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <linearGradient id="gradient">
    <stop offset="0%" />
    <stop offset="100%" />
  </linearGradient>
  <rect width="100" height="50" fill="url(#gradient)" />
</svg>

<br/>
<button id="greenButton">Green</button>
<button id="redButton">Red</button>

Answer 5

आपके सभी सटीक उत्तर के लिए, आप सभी का धन्यवाद।

एक छाया डोम में svg का उपयोग करते हुए, मैं svg के भीतर 3 लीनियर ग्रेडिएंट्स की आवश्यकता करता हूं, एक के अंदर। मैं वेब घटक पर सीएसएस भरण नियम रखता हूं और इनहेरिटेंस ओड फिल काम करता है।

<svg viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
  <path
    d="m258 0c-45 0-83 38-83 83 0 45 37 83 83 83 45 0 83-39 83-84 0-45-38-82-83-82zm-85 204c-13 0-24 10-24 23v48c0 13 11 23 24 23h23v119h-23c-13 0-24 11-24 24l-0 47c0 13 11 24 24 24h168c13 0 24-11 24-24l0-47c0-13-11-24-24-24h-21v-190c0-13-11-23-24-23h-123z"></path>
</svg>

<svg height="0" width="0">
  <defs>
    <linearGradient id="lgrad-p" gradientTransform="rotate(75)"><stop offset="45%" stop-color="#4169e1"></stop><stop offset="99%" stop-color="#c44764"></stop></linearGradient>
    <linearGradient id="lgrad-s" gradientTransform="rotate(75)"><stop offset="45%" stop-color="#ef3c3a"></stop><stop offset="99%" stop-color="#6d5eb7"></stop></linearGradient>
    <linearGradient id="lgrad-g" gradientTransform="rotate(75)"><stop offset="45%" stop-color="#585f74"></stop><stop offset="99%" stop-color="#b6bbc8"></stop></linearGradient>
  </defs>
</svg>

<div></div>

<style>
  :first-child {
    height:150px;
    width:150px;
    fill:url(#lgrad-p) blue;
  }
  div{
    position:relative;
    width:150px;
    height:150px;
    fill:url(#lgrad-s) red;
  }
</style>
<script>
  const shadow = document.querySelector('div').attachShadow({mode: 'open'});
  shadow.innerHTML="<svg viewbox=\"0 0 512 512\">\
    <path d=\"m258 0c-45 0-83 38-83 83 0 45 37 83 83 83 45 0 83-39 83-84 0-45-38-82-83-82zm-85 204c-13 0-24 10-24 23v48c0 13 11 23 24 23h23v119h-23c-13 0-24 11-24 24l-0 47c0 13 11 24 24 24h168c13 0 24-11 24-24l0-47c0-13-11-24-24-24h-21v-190c0-13-11-23-24-23h-123z\"></path>\
  </svg>\
  <svg height=\"0\">\
  <defs>\
    <linearGradient id=\"lgrad-s\" gradientTransform=\"rotate(75)\"><stop offset=\"45%\" stop-color=\"#ef3c3a\"></stop><stop offset=\"99%\" stop-color=\"#6d5eb7\"></stop></linearGradient>\
    <linearGradient id=\"lgrad-g\" gradientTransform=\"rotate(75)\"><stop offset=\"45%\" stop-color=\"#585f74\"></stop><stop offset=\"99%\" stop-color=\"#b6bbc8\"></stop></linearGradient>\
  </defs>\
</svg>\
";
</script>

कोडपेन में मेरा परीक्षण देखें

पहला एसवीजी सामान्य है, दूसरा एक शैडो डोम के अंदर है।

Answer 6

एक लक्ष्य तत्व पर रेखीयग्रैडिएंट कैसे सेट करें :

<style type="text/css">
    path{fill:url('#MyGradient')}
</style>
<defs>
    <linearGradient id="MyGradient">
        <stop offset="0%" stop-color="#e4e4e3" ></stop>
        <stop offset="80%" stop-color="#fff" ></stop>
    </linearGradient>
</defs>

Comments

प्रश्न में कुछ भी php के उपयोग का अर्थ नहीं है।

— एसीजे