開発者ドキュメント

SVGの放射状勾配

線形グラデーションがSVGでどのように定義されているかについてはすでに説明したので、放射状グラデーションの例についても説明します。 構文は線形グラデーションと非常によく似ています。

繰り返しになりますが、これがベースクロスボーンSVG画像です。

そして、これがそのSVGマークアップであり、パスデータを…に変更することで簡略化されています。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <style>.bones{fill:#ccc ;} .eye{fill:#666;}</style>

  <path class="bones" d="..."/>

  <path class="bones" d="..."/>

  <g>
    <path class="eye" d="..."/>
    <path class="eye" d="..."/>
  </g>
</svg>

これが、濃い緑色から石灰色の放射状グラデーションのバージョンです。

そして、これがマークアップです。 強調表示されたセクションとdef、radialGradientおよびstop要素に注意してください。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <style>.eye{fill:#F9EC31;}</style>

  <defs>
    <radialGradient id="bones-gradient">
	  <stop offset="0%" style="stop-color:#FF9133;" />
	  <stop offset="100%" style="stop-color:#FF0015;" />
    </radialGradient>
  </defs>

  <g fill="url(#bones-gradient)">
	  <path class="bones" d="..."/>
	  <path class="bones" d="..."/>
  </g>

  <g>
    <path class="eye" d="..."/>
    <path class="eye" d="..."/>
  </g>
</svg>

現在、複数のカラーストップとストップ不透明度の使用を備えたバージョン:

そしてそのマークアップ:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <style>.eye{fill:#211533;}</style>

  <defs>
	<radialGradient id="bones-gradient">
	  <stop offset="0%" style="stop-color:#5AA8DF;stop-opacity:1" />
	  <stop offset="50%" style="stop-color:#FB7629;stop-opacity:0.7" />
	  <stop offset="100%" style="stop-color:#FAE9B0;stop-opacity:0.5" />
	</radialGradient>
  </defs>

  <g fill="url(#bones-gradient)">
	  <path class="bones" d="..."/>
	
	  <path class="bones" d="..."/>
  </g>

  <g>
    <path class="eye" d="..."/>
    <path class="eye" d="..."/>
  </g>
</svg>

そして最後に、グラデーションの位置を変更する方法を示すために、より単純な円の形でそれを示しましょう。

マークアップは次のとおりです。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <defs>
    <radialGradient id="gradient1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
	<stop offset="0%" style="stop-color:#FF00FF;" />
	<stop offset="100%" style="stop-color:#FFBD2E;" />
    </radialGradient>

    <radialGradient id="gradient2" cx="50%" cy="50%" r="70%" fx="50%" fy="50%">
	<stop offset="0%" style="stop-color:#FF00FF;" />
	<stop offset="100%" style="stop-color:#FFBD2E;" />
    </radialGradient>

    <radialGradient id="gradient3" cx="20%" cy="50%" r="50%" fx="50%" fy="50%">
	<stop offset="0%" style="stop-color:#FF00FF;" />
	<stop offset="100%" style="stop-color:#FFBD2E;" />
    </radialGradient>

    <radialGradient id="gradient4" cx="50%" cy="50%" r="50%" fx="20%" fy="90%">
	<stop offset="0%" style="stop-color:#FF00FF;" />
	<stop offset="100%" style="stop-color:#FFBD2E;" />
    </radialGradient>

    <radialGradient id="gradient5" cx="20%" cy="20%" r="50%" fx="20%" fy="20%">
	<stop offset="0%" style="stop-color:#FF00FF;" />
	<stop offset="100%" style="stop-color:#FFBD2E;" />
    </radialGradient>

    <radialGradient id="gradient6" cx="50%" cy="50%" r="50%" fx="80%" fy="80%">
	<stop offset="0%" style="stop-color:#FF00FF;" />
	<stop offset="100%" style="stop-color:#FFBD2E;" />
    </radialGradient>
  </defs>

  <!-- top left circle -->
  <circle cx="40" cy="60" r="30" fill="url(#gradient1)" />
  <!-- top center circle -->
  <circle cx="100" cy="60" r="30" fill="url(#gradient2)" />
  <!-- top right circle -->
  <circle cx="160" cy="60" r="30" fill="url(#gradient3)" />

  <!-- bottom left circle -->
  <circle cx="40" cy="140" r="30" fill="url(#gradient4)" />
  <!-- bottom center circle -->
  <circle cx="100" cy="140" r="30" fill="url(#gradient5)" />
  <!-- bottom right circle -->
  <circle cx="160" cy="140" r="30" fill="url(#gradient6)" />
</svg>

導入された新しいプロパティに関するクイックポインタは次のとおりです。

モバイルバージョンを終了