সিএসএস ব্যবহার করে এসভিজি গ্রেডিয়েন্ট

Question 1

আমি একটি এসভিজিতে গ্রেডিয়েন্ট প্রয়োগ করার চেষ্টা করছি rect উপাদানটিতে ।

বর্তমানে, আমি fillবৈশিষ্ট্যটি ব্যবহার করছি । আমার সিএসএস ফাইলে:

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

এবং rect ব্রাউজারে দেখার সময় উপাদানটির সঠিক ভরাট রঙ থাকে।

তবে, আমি জানতে চাই যে আমি এই উপাদানটিতে রৈখিক গ্রেডিয়েন্ট প্রয়োগ করতে পারি কিনা?

Question 2

আপনি কোনও 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>

স্নিপেট প্রসারিত করুন

Question 3

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গ্রেডিয়েন্টের জন্য কেবল প্রত্যেকের জন্য একটি নামযুক্ত ভেরিয়েবল সেট করুন এবং তারপরে CSS এর মতো আপনার পছন্দসই করুন। আপনি জাভাস্ক্রিপ্টের সাহায্যে তাদের মানগুলি পরিবর্তনশীল করতে পারেন, যেমন:

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

Question 4

ফিনেসি যা লিখেছেন তার উপরে ভিত্তি করে তৈরি করা, এখানে এসভিজি লক্ষ্য করে এটির গ্রেডিয়েন্ট পরিবর্তন করার সহজ উপায়।

এটি আপনার করা দরকার:

গ্রেডিয়েন্ট এলিমেন্টে সংজ্ঞায়িত প্রতিটি রঙ স্টপে ক্লাস বরাদ্দ করুন।
CSS টার্গেট করুন এবং সাধারণ স্টাড ক্লাস ব্যবহার করে স্টপগুলির প্রতিটিটির জন্য স্টপ-কালার পরিবর্তন করুন।
জয়!

পরিবর্তে ক্লাস ব্যবহারের কিছু সুবিধা :nth-childহ'ল আপনি যদি আপনার স্টপগুলি পুনরায় অর্ডার করেন তবে তা প্রভাবিত হবে না। এছাড়াও, এটি প্রতিটি শ্রেণীর উদ্দেশ্য পরিষ্কার করে দেয় - আপনার প্রথম সন্তানের নীল রঙের প্রয়োজন আছে কিনা বা দ্বিতীয়টি নিয়ে আপনি ভাবছেন left

আমি এটি সমস্ত ক্রোম, ফায়ারফক্স এবং আই 11 এ পরীক্ষা করেছি:

.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 , আউটপুট

Question 5

এখানে একটি সমাধান রয়েছে যেখানে আপনি গ্রেডিয়েন্ট যুক্ত করতে এবং কেবল সিএসএস ব্যবহার করে এর রং পরিবর্তন করতে পারেন:

// 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>

স্নিপেট প্রসারিত করুন

Question 6

আপনার সমস্ত সুনির্দিষ্ট জবাবের জন্য সবাইকে ধন্যবাদ।

একটি ছায়া ডোমে এসভিজি ব্যবহার করে, আমি এসভিগির অভ্যন্তরে, আমার ভিতরে 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>

স্নিপেট প্রসারিত করুন

প্রথমটি হল সাধারণ এসভিজি, দ্বিতীয়টি একটি ছায়া ডোমের অভ্যন্তরে inside

Question 7

একটি লক্ষ্য উপাদানটিতে লিনিয়ার গ্রেডিয়েন্ট কীভাবে সেট করবেন তা এখানে রয়েছে :

<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>