stop 要素でかけたグラデーションの角度を変更するには、gradientTransform 属性を使用する方法と、勾配ベクトルを使用する方法があります。

gradientTransform 属性で変更する

gradientTransform 属性を使用して角度を変更するには、gradientTransform 属性へ rotate と 角度を指定します。
linearGradient 要素へ gradientTransform=”rotate(45)” と属性を指定するとグラデーションが45度の角度になります。

<svg width="200" height="200">
    <defs>
    <linearGradient id="sample" gradientTransform="rotate(45)">
      <stop offset="20%"   stop-color="orange" />
      <stop offset="100%" stop-color="red" />
    </linearGradient>
    </defs>
     
    <circle cx="100" cy="100" r="90" fill="url(#sample)" />
</svg>

上記コードの表示

縦方向へグラデーションをかけたい場合は、gradientTransform=”rotate(90)” にします。

<svg width="200" height="200">
    <defs>
    <linearGradient id="sample" gradientTransform="rotate(90)">
      <stop offset="30%"   stop-color="orange" />
      <stop offset="100%" stop-color="red" />
    </linearGradient>
    </defs>
     
    <circle cx="100" cy="100" r="90" fill="url(#sample)" />
</svg>

上記コードの表示

勾配ベクトルで角度を変更する

勾配ベクトルでグラデーションの角度を変更するには、x1 y1 x2 y2 の属性と値を指定します。

45度のグラデーションにする場合は、linearGradient 要素へ x1=”0″ y1=”0″ x2=”1″ y2=”1″ と指定します。

<svg width="200" height="200">
    <defs>
    <linearGradient id="sample" x1="0" y1="0" x2="1" y2="1">
      <stop offset="30%"   stop-color="orange" />
      <stop offset="100%" stop-color="red" />
    </linearGradient>
    </defs>
     
    <circle cx="100" cy="100" r="90" fill="url(#sample)" />
</svg>

上記コードの表示

縦方向へグラデーションをかけたい場合は、linearGradient 要素へ x1=”0″ y1=”0″ x2=”0″ y2=”1″ と指定します。

<svg width="200" height="200">
    <defs>
    <linearGradient id="sample" x1="0" y1="0" x2="0" y2="1">
      <stop offset="30%"   stop-color="orange" />
      <stop offset="100%" stop-color="red" />
    </linearGradient>
    </defs>
     
    <circle cx="100" cy="100" r="90" fill="url(#sample)" />
</svg>

上記コードの表示