SVG グラデーションを使用して曲線プログラミングの課題を解決する

プログラミングの世界では、一見単純なタスクが複雑な課題に発展することがあります。最近、Figma のデザインをコードに変換しようとしたときに、そのような課題に遭遇しました。当面のタスクには、直線的なグラデーションを持つ放射状のダイヤルを作成することが含まれていました。これは一見単純な要件ですが、すぐに予想よりも複雑であることが判明しました。

この投稿では、SVG グラデーションの世界を詳しく掘り下げ、発生した課題に対処するために考案したソリューションを検討し、このような複雑なエンジニアリングの課題を与えられることが時として非常にやりがいのある理由を論じます。

変化球を投げた

最初は単純そうに見えました。文字盤を作成し、それに線形グラデーションを適用するために使用できるライブラリが必要です。それはどれほど難しいでしょうか？

そして、 High ChartsやFusionCharts などのライブラリを調査するために簡単に検索した結果、SVG を使用して線形グラデーションを生成するだけでなく、放射状のダイヤルを作成できるライブラリを見つけました。ただし、これら 2 つの要素をシームレスに結合しようとすると、実際の複雑さが明らかになります。障害は、SVG 内で定義される線形グラデーションの性質にありました。デフォルトでは、線形グラデーションは直線に沿って色間を遷移します。円形パスのストロークに適用すると、グラデーションの方向は円の曲線を無視して直線のままになります。

したがって、単一の曲線で作成された完全な円形のダイヤルに線形グラデーションを適用すると、グラデーションはダイヤルに沿った望ましい放射状のパスではなく、直線のパスをたどることになります。これでは私たちが探していた曲線の勾配を実現できないため、振り出しに戻りました。

問題を分解する

代わりに、放射状のダイヤルを取り囲むスムーズに変化するグラデーションの効果を実現するには、ダイヤルを複数のセクションに分割し、各セクションに個別のグラデーションを適用する必要があることに気付きました。

この例では、ダイヤルを 4 つのセクションに分割しました。それぞれに独自の線形グラデーションが割り当てられました。グラデーションストップの色を慎重に選択することで、文字盤の周囲に連続したグラデーションの外観を作り出すことができました。

ここでは、SVG で放射状ダイヤルを構築する方法を見ていきます。 「d」属性は描画するパスを定義します。この場合、放射状ダイヤルの最初の 4 分の 1 のパスを指定します。

「M」は「移動」を表し、パスの開始点を座標 (150,10) に設定します。 「a」コマンドは楕円弧を作成します。この円弧コマンドにはいくつかのパラメータがあります。最初の 2 つのパラメータ「120 120」は、円弧の描画に使用される楕円の x 半径と y 半径を設定します。 「0 0 1」は、x 軸の回転 (ゼロ)、大きな円弧フラグ、およびスイープ フラグを定義します。最後の「103.9230 60」はパスの終点を設定し、円弧を完成させます。次に、ストローク属性を使用してパスにグラデーションを適用します。

このプロセスは文字盤の 4 分の 1 ごとに繰り返されます。各四半期には独自のパスと独自の勾配が与えられます。これにより、単一の滑らかに変化するグラデーションがダイヤルの周囲を周回する効果が得られます。

動的勾配充填

ダイヤルに沿ってグラデーションを動的に塗りつぶすために、SVG パスの stroke-dashoffset プロパティと stroke-dasharray プロパティを利用しました。この手法は、放射状のダイヤルを作成するときによく使用されます。 CSS トリックには、このアプローチに関する詳細な記事があります: SVG ライン アニメーションの動作。

ストローク ダッシュ配列をパスの長さに等しく設定することで、円を囲む点線に似たダッシュとギャップのパターンを確立しました。ストローク-ダッシュオフセット プロパティはダッシュ パターンの開始点を決定し、ストロークの動きを効果的にアニメーション化します。パスの開始点からパスの長さまでのストローク ダッシュ オフセットをアニメーション化することにより、ダッシュが円の周りを「移動」しているように見えます。

複雑さを受け入れる（場合によっては）

複雑な設計は難しい技術的課題につながる可能性がありますが、プログラマーにとっては問題解決スキルを磨く機会にもなります。これは、少なくとも私にとって、プログラミングを面白く保つために不可欠な部分です。

プログラミングで直面する複雑さは、作業中の設計の複雑さを反映していることがよくあります。直線的なグラデーションを持つ放射状のダイヤルを特徴とする当社の Figma デザインは、視覚的に魅力的なデザイン要素がどのように重大な技術的課題を引き起こす可能性があるかを示す良い例として機能します。

プログラマーが本能的にデザイナーと協力して、設計仕様の点で妥協点を見つけようとするのは簡単です。実際、それが正しいアプローチであることがよくあります。しかし、場合によっては、自分のデザインを他のデザインより際立たせたい場合は、自分の快適ゾーンを超えて、問題を解決する創造的な方法を考え出す必要があります。

別の言い方をすると、設計の複雑さは技術的な課題につながる可能性がある一方で、プログラマーにとって最も貴重なスキルである問題解決能力を磨く機会としても機能します。

ここでも公開されています。