ストローク効果のあるSVGグラデーション

Question

<p>私発行现了この段代コード</p> <pre class="brush:php;toolbar:false;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 34 34">

Answer 1

SVG では、<linearGradient> および <radialGradient> を使用できます。プログレスバーを作成しているので、レイアウトによっては、放射状グラデーションを使用して「先細のグラデーション」 (引用符で囲みます!) を作成するオプションになる可能性がありますが、これを使用するのは非常に面倒です。

組み込みのグラデーションに代わる良い方法は、SVG と CSS を組み合わせることです。 CSS スタイルを埋め込み SVG 要素に適用できます。 SVG 要素に適用できる先細のグラデーションが必要な場合は、ストロークなどにのみ表示されるようにマスクします。以下に例を示します:

リーリー リーリー