CSS kullanan SVG gradyanı

105

Bir SVG rectöğesine uygulanan gradyan elde etmeye çalışıyorum .

Şu anda fillözniteliği kullanıyorum . CSS dosyamda:

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

Ve rectöğe, tarayıcıda görüntülendiğinde doğru dolgu rengine sahiptir.

Ancak, bu öğeye doğrusal bir gradyan uygulayıp uygulayamayacağımı bilmek istiyorum.

css  svg  gradient  linear-gradients 
— Hrishikesh Choudhari
kaynak

Yanıtlar:

99

CSS'de bir fillöznitelikte ne kullanırsanız kullanın . Elbette, bu, doğrusal renk geçişini SVG'nizde bir yerde tanımlamanızı gerektirir.

İşte eksiksiz bir örnek:

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>
Snippet'i genişlet

— Thomas W
kaynak
2
Bu yüzden ayrı bir dosyada bu gradyan yarattı ve kullanılan fillbu şekilde: fill: url(../js/gradient.svg#MyGradient);. Bu doğru yol mu?
— Hrishikesh Choudhari
@HrishikeshChoudhari: Evet, bu doğru, ancak Chrome ve Safari'nin de diğer dosyalardan referans öğelerini desteklemediğini düşünüyorum. IE9 hakkında emin değilim (şu anda test edemiyorum, sadece deneyin).
— Thomas W
54
Bunu okuyan ve "ne olacak fill: linear-gradient (...)?" Diye soran herkese CSS2 sınıfı etrafında inşa edilen fillbir gerektirir . Başka bir deyişle, bu yorumu yazdığım sırada bunu CSS aracılığıyla yapmanın şu anda tek yolu bu cevap. Bir eleman eklemeniz gerekiyor . Son olarak, SVG2 için w3 Çalışma Taslağı üzerinden geçerken , dolgu css kuralı üzerinde destek sağlamadı ve spesifikasyona dahil edilmeyebilir. <paint><color>linearGradientlinear-gradient
— Arthur Weborg
Bu durumda yön nasıl değiştirilir?
— AGamePlayer
1
@AwQiruiGuo MDN'ye bir göz atın (özellikle gradientTransformözniteliğe)
— Thomas W
37

2019 Cevap

Yepyeni css özellikleriyle, diğer adıyla değişkenlerle daha da fazla esnekliğe sahip olabilirsiniz. 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>
Snippet'i genişlet

stopDegradedeki her biri için adlandırılmış bir değişken ayarlayın ve ardından css'de istediğiniz gibi özelleştirin. Değerlerini javascript ile dinamik olarak değiştirebilirsiniz, örneğin:

document.querySelector('#header-shape-gradient').style.setProperty('--color-stop', "#f5f7f9");
— Maciej Kwas
kaynak
3
IE'de desteklenmez.
— aoakeson
3
CSS Özel Nitelikleri çok uzun zamandır buradalar, bir şekilde birisi onları kullanmaya henüz hazır değilse, o zaman değişikliklere asla hazır olmayacak.
— Maciej Kwas
2
@MaciejKwas, yanılıyorsun. Eski tarayıcılar sonsuza kadar kalmaz, bu nedenle şu anda hazır olmayan şirketler o zaman hazır olacaktır. Ve eğer birisi dinleyicilerinin bir bölümünü elden çıkarmaya hazır değilse, bu onun değişikliklere hazır olmadığı anlamına gelmez, bu, daha büyük bir izleyici kitlesini korumak için değişikliklerden daha sonra yararlanmayı tercih ettiği anlamına gelir.
— Finesse
22
@aoakeson IE öldü. Yaşamın sonu. Edge de ölüyor, bu bir 2019 cevabı, bu yüzden IE sayılmamalı. IE, düz bir renk kullanarak zarif bir şekilde bozulabilir.
— Ciprian
5
Ben inanılmaz 2019'da tepki bu tür rastlamak şaşırdım @aoakeson Sen ediyorum bu düzeyde IE SVG desteği varsaymak bir geliştirici olarak naif olurdu hiç , SO size şişirilmiş verilmesi üzerinde dursun bir tomurcuklanma geliştirici desteklenecek , IE'yi desteklemeyi düşünüyorsanız, gereksiz yere ihtiyaç duyulan bir şey için çok doldurulmuş cevap
— James Martin-Davies
21

Finesse'nin yazdıklarının üzerine inşa ederek, svg'yi hedeflemenin ve gradyanını değiştirmenin daha basit bir yolu.

Yapman gereken bu:

  1. Degrade öğesinde tanımlanan her bir renk durağına sınıflar atayın.
  2. Düz sınıfları kullanarak bu durakların her biri için css'i hedefleyin ve durma rengini değiştirin.
  3. Kazanın!

Bunun yerine sınıfları kullanmanın bazı faydaları, :nth-childduraklarınızı yeniden sıralarsanız bundan etkilenmemesidir. Ayrıca, her sınıfın amacını netleştirir - ilk çocukta mı yoksa ikinci çocukta mavi renge mi ihtiyacınız olduğunu merak etmeye başlayacaksınız.

Tüm Chrome, Firefox ve IE11'de test ettim:

.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>
Snippet'i genişlet

Burada düzenlenebilir bir örneğe bakın: https://jsbin.com/gabuvisuhe/edit?html,css,output

— Kumarharsh
kaynak
Eksikliği, stop sınıfı adlarının ne olduğunu ve hangi sıraya sahip olduklarını tam olarak bilmemenizdir. Aslında çözümler aynı iyi, tek fark CSS seçiciler.
— Finesse
3
Bence bu, OP'lerin sorusuna verilecek en iyi modern cevap.
— Elemental
10

Sadece CSS kullanarak gradyan ekleyebileceğiniz ve renklerini değiştirebileceğiniz bir çözüm:

// 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>
Snippet'i genişlet

— İncelik
kaynak
2

Kesin cevaplarınız için herkese teşekkür ederim.

Bir gölge domunda svg kullanarak, svg içinde ihtiyacım olan 3 doğrusal gradyan, a içine ekliyorum. Css doldurma kuralını web bileşenine yerleştiriyorum ve dolgu devralma işi yapıyor.

    <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>
Snippet'i genişlet

Birincisi normal SVG, ikincisi ise bir gölge domunun içinde.

— Roland Gautier
kaynak
-4

Hedef öğede bir doğrusalGradyanı nasıl ayarlayacağınız aşağıda açıklanmıştır :

<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>
— akselparatre
kaynak
Sorudaki hiçbir şey php kullanımını ima etmez.
— ACJ
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.