web-dev-qa-db-ja.com

SVGパスに沿ってグラデーションを適用できますか？

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

<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"
        width="100" height="100">
        <defs>
            <linearGradient id="grad1">
                <stop offset="0%" stop-color="red"/>
                <stop offset="100%" stop-color="red" stop-opacity="0" />
            </linearGradient>
        </defs>
        <path d="M50 10  A40 40 0 1 0 90 50"
            stroke="url(#grad1)" stroke-width="10" fill="transparent"/>
    </svg>

上のエッジから反時計回りに右のエッジ（270°）まで弧を描きますが、グラデーションが間違っています。始点（上端、0°）が不透明で終点（右端、270°）が透明になるようにパスをたどる代わりに、アークストロークの結果の画像は画面空間で左から右に色付けされます。

グラデーションをアークパスに追従させるにはどうすればよいですか？

svgpathgradient
54
ygoe

Mike Bostockは方法を見つけましたが、簡単ではありませんでした： https://bl.ocks.org/mbostock/4163057

基本的に、この手法は getPointAtLength を使用してストロークを多数の短いストロークにスライスし、それぞれに補間されたカラーストップを指定し、それらのストップ間の各ショートストロークにグラデーションを適用します。

あなたが挑戦するなら幸運;）

編集（2019年7月3日）：

探しているものを正確に実行するのに役立つライブラリがあります。 D3を使用する必要はありませんが、必要に応じて使用できます。 中規模のチュートリアルです 。

22
ericsoco

このタイプの勾配は、SVGで実現するのは簡単ではありません。 SVG angular gradient を参照してください。

また、transparentはSVGで有効な色ではありません。 stop-opacityこの例のように： http://jsfiddle.net/WF2CS/

私は、最も簡単な解決策は、不透明度が変化する一連の小さなアークパスであると考えています。

10
methodofaction

私もこの問題を抱えていたので、 私は支援するライブラリを作成しましたpathに沿って続くグラデーションの作成で。必要に応じて、Javascriptでスタンドアロンで使用することも、D3.jsとともに使用することもできます。このライブラリは、最初の回答で参照したMike Bostockの研究に基づいていますが、必要な依存関係としてD3を削除しました。

バックストーリーと使用法を説明するMediumに関する簡単なチュートリアルも書いています。 。

1
cereallarceny

別の方法は、2つの半円を作成し、それぞれのストロークに反対の線形グラデーションを適用し、それらが両方ともg要素に含まれていることを確認することです。 （私の例では、組み合わせたグラデーションは270度ではなく360です。2つの半円が垂直に積み重ねられます。最初のグラデーション（上の半円のストロークに適用）は不透明度100〜50％で、次は0です。 ％から50％。両方の勾配の単位ベクトルはx1、y1、y2 = 0およびx2 = 1に設定されており、左から右に実行されます。）次に、transform = rotate（deg、ctrX、ctrY）をgに適用します。

0
Andrew Levino