SVG
グラジエント

Android Angular 2 AngularJS CSS HTML Java Language JavaScript jQuery PHP Python Language
サーチ…


パラメーター

一般定義
gradientUnits グラデーション属性の座標系objectBoundingBoxまたはuserSpaceOnUseのいずれか
gradientTransform グラデーションの内容に適用する変換
spreadMethod グラデーション境界の外側で何が起こるかを定義します。パッド、リフレクションまたはリピートのいずれか
xlink：href 属性またはコンテンツを提供する別のグラデーションへのリンク
------ ------
線形勾配定義
------ ------
x1 勾配ベクトルを定義する
×2 x1参照
y1 x1参照
y2 x1参照
------ ------
放射グラジエント定義
------ ------
CX 外側の勾配中心のx座標
cy 外側の勾配中心のy座標
r グラデーションの外側の半径100％の停留所の位置
FX 内側の勾配中心のx座標0％の停留所の位置
fy 内側の勾配中心のyの位置0％の停留所の位置

備考

SVGは大文字と小文字を区別しますので、途中で大文字のGを使用してください。

線形勾配

<svg>
  <defs>
        <linearGradient id='g' y1="100%" x2="100%">
            <stop offset='0%' stop-color='yellow' />
            <stop offset='100%' stop-color='green' />
        </linearGradient>
    </defs>
    <rect width='100%' height='100%' fill='url(#g)'/>
</svg>

ラジアルグラデーション

<svg>
  <defs>
    <radialGradient id="g">
      <stop offset="10%" stop-color="green" />
      <stop offset="90%" stop-color="white" />
    </radialGradient>
  </defs>

  <rect width='100%' height='100%' fill='url(#g)'/>
</svg>


Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow