web-dev-qa-db-ja.com

CSSを使用したSVGグラデーション

SVG rect要素にグラデーションを適用しようとしています。

現在、fill属性を使用しています。私のCSSファイルで：

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

rect要素には、ブラウザーで表示したときに正しい塗りつぶし色が設定されています。

ただし、この要素に線形グラデーションを適用できるかどうかを知りたいですか？

csssvggradientlinear-gradients
76
Hrishikesh Choudhari

fill属性で使用するものをCSSで使用します。もちろん、これにはSVGのどこかに線形グラデーションを定義しておく必要があります。

完全な例を次に示します。

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>
78
Thomas W

2019年の回答

新しいcssプロパティを使用すると、変数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で好きなようにカスタマイズします。次のように、JavaScriptを使用して値を動的に変更することもできます。

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

CSSのみを使用してグラデーションを追加し、色を変更できるソリューションを次に示します。

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

Finesseが書いたことに基づいて、svgをターゲットにして勾配を変更する簡単な方法を次に示します。

これはあなたがする必要があることです：

  1. グラデーション要素で定義されている各カラーストップにクラスを割り当てます。
  2. Cssをターゲットに設定し、プレーンクラスを使用して各ストップのストップカラーを変更します。
  3. 勝つ！

:nth-childの代わりにクラスを使用する利点のいくつかは、ストップの順序を変更しても影響を受けないことです。また、各クラスの意図が明確になります。最初の子に青色が必要か、2番目の子に青色が必要かどうか疑問に思われるでしょう。

すべてのChrome、Firefox、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

5
kumarharsh