SVG パスにグラデーションを追加することはできますか?

Question

スクリプトによってトリガーされる単純な読み込みインジケーターを Web サイトに配置したいと考えています。これは勾配のある単純な円弧であり、ユーザーが待っている間に回転する必要があります。アニメーション部分はまだ試していませんが、今は静的スタイルにこだわっています。これが私がこれまでに得たものです:

リーリー

上端から右端(270°)まで反時計回りに円弧を描きますが、勾配が間違っています。円弧ストロークの最終イメージは、開始点 (上端、0°) が不透明で終了点 (右端、270°) が透明になるようにパスをたどるのではなく、画面空間内で左から右に色付けされます。

円弧のパスに沿ってグラデーションを作成するにはどうすればよいですか?

Answer 1

マイク・ボストックは、簡単ではありませんが、方法を見つけました。 https://bl.ocks.org/mbostock/4163057

基本的に、この手法では getPointAtLength ストロークを多くの短いストロークに分割するには、各ストロークに補間カラー ストップを指定し、各短いストロークで適用グラデーションを補間します。

挑戦する気持ちがあるなら頑張ってください ;)

編集者 (2019 年 7 月 3 日):

あなたが探していることを正確に実行するのに役立つライブラリが登場しました。 D3 を使用する必要はありませんが、必要に応じて使用できます。 これは Medium に関するチュートリアルです .

Answer 2

CSS 画像モジュール - レベル 4 では、conic-gradient が導入されています。 MDN によると、IE を除くすべての主要なブラウザで サポートされています。

技術的にはパスに沿ったグラデーションではありませんが、パスは円形であるため、次の方法で目的の結果を達成できます。

リーリー リーリー