SVGの放射状グラデーション：fxとfyでハイライトを動かす
fxとfyでSVGの放射状グラデーションのハイライトを移動。円形と楕円形の塗りを比較し、エンブレムの輪郭と透明な開口部を保ちます。
目次
アートワークを動かさずにSVGの放射状グラデーションのハイライトを移動するには、<radialGradient>にfxとfyを設定します。cx、cy、r、パスはそのままにしてください。fr="0"では、焦点から色の変化が始まり、終端の円が外側への広がりを制御し続けます。ハイライトが伸びて見える場合は、輪郭を編集する前にgradientUnitsと図形のバウンディングボックスを確認してください。
この手順では、開口部のある独自の横長の六角形エンブレムを使います。中央とずらしたハイライトを比較した後、オブジェクト基準の楕円とユーザー空間の円という、選んだ二つの塗り定義を比較します。SVGはコードとして直接作成したものです。トレースサービスやエディターが作ったサンプルではありません。
焦点と終端の円を分ける
放射状グラデーションには、開始円と終端円があります。このひな形では、fr="0"によって開始円を一つの点にしています。fxとfyがその点を配置し、cx、cy、rが終端円を定義します。焦点の座標を指定しない場合は、対応する中心座標が既定値になります。MDNのradialGradientリファレンスで、これらの属性と既定値を説明しています。
二つの編集を別の作業として考えてください。
| 目的の変更 | 編集するもの | 比較のために固定するもの |
|---|---|---|
| 最も明るい領域を左上へ動かす | fxとfy | 終端円の座標、カラーストップ、パス |
| 塗り領域全体を動かす | cxとcy。明示した焦点座標も確認する | パス |
| 塗りの届く範囲を変える | r | 中心、焦点、パス |
| 横長の図形で円形の塗り領域を保つ | ユーザー空間の座標を選ぶ | すべての座標値と半径を確認する |
水平方向の焦点座標はfx、垂直方向はfyです。両方を変えると、開始点が斜めに動きます。パスの点が変わったり、開口部が移動したりするわけではありません。
ハイライトをずらした完全なSVGをコピーする
これをemblem.svgとして保存し、ブラウザーで開きます。外部画像やスタイルシートへの依存はありません。
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="120" viewBox="-20 0 200 120">
<defs>
<radialGradient id="highlight" gradientUnits="objectBoundingBox"
cx=".5" cy=".5" r=".6" fx=".22" fy=".18" fr="0" spreadMethod="pad">
<stop offset="0" stop-color="#fff1d8"/>
<stop offset=".45" stop-color="#ed805f"/>
<stop offset="1" stop-color="#6f284c"/>
</radialGradient>
</defs>
<path d="M20 20 H140 L160 60 L140 100 H20 L0 60 Z M50 38 H110 L130 60 L110 82 H50 L30 60 Z" fill="url(#highlight)" fill-rule="evenodd"/>
</svg>中央の対照例を作るには、fx=".22" fy=".18"だけをfx=".5" fy=".5"に変更します。ほかの属性と、d内の二つの輪郭は変更しません。
外周はx=0から160、y=20から100までです。二つ目の輪郭が開口部を定義します。fill-rule="evenodd"がその開口部を塗らずに保つため、グラデーションを動かしても埋まりません。MDNのfill-ruleリファレンスで、この複合パスが使う交差規則を説明しています。
中央の焦点は開口部内にあるので、最も明るい点そのものは見えません。それでも周囲の色の変化はリング上に見えます。ずらした焦点は左上の塗られた帯に位置し、最も明るいストップが見えるようになります。座標を編集しても変化が小さく見える場合に、この違いが役立ちます。焦点がマークの透明部分の後ろにある可能性があります。
横長のエンブレムでグラデーションが楕円になる理由
gradientUnits="objectBoundingBox"では、座標は塗るオブジェクトの範囲を表します。このエンブレムの範囲は160 × 80で、SVGキャンバスの200 × 120とは異なります。正規化された円は、正方形でないその範囲を通して楕円に写像されます。MDNのgradientUnitsリファレンスで、この対応付けを説明しています。
ここではcx=".5" cy=".5"は(80, 60)に対応します。半径.6は、水平方向の半径96と垂直方向の半径48になります。ずらした焦点は次に対応します。
x = 0 + .22 × 160 = 35.2
y = 20 + .18 × 80 = 34.4変形のないこのSVGで終端領域を円にするには、グラデーションの座標属性を次に置き換えます。
gradientUnits="userSpaceOnUse"
cx="80" cy="60" r="64"
fx="35.2" fy="34.4" fr="0" spreadMethod="pad"中央の対照例にはfx="80" fy="60"を使います。半径は両方向とも64ユーザー単位になります。これは96 × 48の楕円とは異なる、選択した終端領域です。座標の定義と実際の半径を両方変えたため、この比較は単位の切り替えだけを切り分けていません。各中央／ずらした焦点のペア内では、焦点座標だけが変わります。
各図形の比率にグラデーションを合わせたい場合は、オブジェクト基準の塗りを使います。位置と円形の広がりをアートワークの座標に合わせる場合は、明示的なユーザー空間の数値を使ってください。離れたロゴのパス間で共有するグラデーションについては、SVGのグラデーション単位を参照してください。
元のブラウザー比較でわかったこと
自作の四つのSVGをすべてChromeで開き、それぞれを100 × 60と300 × 180 CSSピクセルで表示しました。大きい版では左上のハイライトを確認しやすくなりました。小さいサイズでも同じずれが見え、すべてのサンプルで開口部は透明のままでした。
ブラウザーのソース報告では、四つすべてのファイルに、一つのパス、画像要素なし、同一のd値、同じ160 × 80のパス範囲が確認されました。元のキャンバスサイズで別にピクセルを読み取り、塗りが変わったことを確認しました。
| 塗りの定義 | 焦点 | 左上のRGBAサンプル | 開口部のアルファ |
|---|---|---|---|
オブジェクト範囲、半径.6 | 中央 | 164, 77, 84, 255 | 0 |
オブジェクト範囲、半径.6 | ずらす | 246, 184, 155, 255 | 0 |
ユーザー空間、半径64 | 中央 | 149, 67, 82, 255 | 0 |
ユーザー空間、半径64 | ずらす | 248, 196, 168, 255 | 0 |
左上のサンプルはアートワーク座標(35, 30)、開口部のサンプルは(80, 60)です。これらの観察は、この元データとブラウザーセッションについてのものです。別のレンダラーの出力や、エディターの読み込み動作を確認したものではありません。
マークを調整する間は焦点を内側に保つ
内側の焦点とfr="0"から始めます。正規化座標では、ずらした点の中心からの距離は約.425で、この例の半径.6より小さい値です。ユーザー空間版では距離が約51.6で、64より小さくなります。どちらも、円を定義する座標系において、開始点を終端円の内側に保ちます。
古い説明には、外側の焦点は必ず終端円上に制限されると書かれている場合があります。SVG 2は開始円が外側にあることを認め、グラデーション円錐の外側に塗られない領域ができるなど、異なる動作を定義しています。SVG 2の放射状グラデーション仕様で、その変更を説明しています。このひな形では内側の点を使い、外側の焦点の描画をブラウザー間でテストしてはいません。
配置を確認する間はspreadMethod="pad"を維持します。グラデーションの範囲外では、padは最後のストップの色を使います。repeatとreflectは繰り返しを加えるため、焦点の比較をわかりにくくする場合があります。MDNのspreadMethodリファレンスで、これらの選択肢を定義しています。
納品前に、SVGを表示する環境で次の三点を確認してください。
- 実際の表示サイズで、ハイライトが意図した塗りのある帯に位置している。
- 開口部が透明のままで、パスデータがマスターと一致している。
- 選んだ円または楕円がマークの比率に合っている。
書き出し後に色が変わる場合は、SVGの色が書き出し後に変わる理由で塗りと納品先の条件を調べてください。焦点の移動は配置の編集なので、ストップの色も同時に変えると比較が読み取りにくくなります。
形状の復元と塗りのデザインを分ける
同じパスを単色で塗り、開口部を保って、このエンブレムの平面マスターを残します。グラデーション版は、それが必要なウェブ用アートワークとして別に保存してください。グラデーションは輪郭に割り当てる塗りであり、この焦点座標は追加のカット用パスを定義しません。
元のロゴがPNGやJPGでしか存在しない場合は、PerfectVectorのロゴベクター化ツールでベクター形状を復元し、塗りを再構築する前に確認できます。外周と開口部を確認してから、SVGの作業でグラデーション座標を設定してください。ラスターのハイライトは、元のfx、fy、半径を、復元可能なデザインパラメーターとして保持していません。きれいなベクター輪郭がすでにあるなら、グラデーションを直接編集します。グラデーションのベクター化ガイドでは、ラスターからベクターへの変換判断を扱っています。
よくある質問
SVGの放射状グラデーションのハイライトを動かすにはどうしますか？ radialGradientにfxとfyの座標を明示します。変更を比較する間は、cx、cy、r、ストップ、パスを固定してください。frがゼロの場合、これらの焦点座標が色の変化の開始点を定めます。
SVGの放射状グラデーションが楕円に見えるのはなぜですか？ objectBoundingBox単位では、正規化された円が塗るオブジェクトの範囲を通して写像されます。範囲が正方形でなければ楕円になります。変形のないSVGでは、明示的なuserSpaceOnUse座標で、アートワークの単位による円形領域を定義できます。
焦点を動かすとロゴの開口部は埋まりますか？ 埋まりません。複合パスとその塗り規則が開口部を決めます。この例はevenoddを使い、すべてのサンプルで同じパスを保っています。焦点を動かしても開口部は透明のままです。
ベクター化で元のグラデーションの焦点座標を復元できますか？ ラスター画像は、元のSVGグラデーションのパラメーターを保持しません。必要なら輪郭を復元して確認し、その後で塗りを作り直し、予定の表示環境でハイライトを確かめてください。
出典
- MDN radialGradient — 開始円と終端円の属性と既定値。
- MDN fx — 水平方向の焦点座標の意味。
- MDN fy — 垂直方向の焦点座標の意味。
- MDN fill-rule — 開口部に使う偶奇の塗り規則。
- MDN gradientUnits — オブジェクトの範囲、ユーザー空間、楕円への写像。
- SVG 2の放射状グラデーション — 開始円の形状と、外側の焦点に関する仕様変更。
- MDN spreadMethod — pad、repeat、reflectの動作。
