78

スクリプトによってトリガーされる単純な読み込みインジケーターを 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°) が透明になるようにパスをたどる代わりに、円弧ストロークの結果のイメージは、画面空間で左から右に色付けされます。

勾配を円弧パスに追従させるにはどうすればよいですか?

4

7 に答える 7

30

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

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

挑戦できるなら頑張ってください ;)

編集（2019年7月3日）：

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

于 2016-03-02T05:30:15.233 に答える
12

このタイプのグラデーションは、SVG で実現するのは簡単ではありません。 SVG 角度グラデーションを参照してください。

また、transparentSVG では有効な色ではありません。stop-opacityこの例のように記載する必要があります: http://jsfiddle.net/WF2CS/

最も簡単な解決策は、さまざまな不透明度を持つ一連の小さなアーク パスである可能性があります。

于 2013-01-31T23:19:05.300 に答える
0

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

于 2014-06-03T19:06:22.453 に答える