SVG ネオン効果

レンダリングは次のとおりです:

それは、アリの輪がその上を這っているようなものです。 。 。 。 。えっと、奇妙なメタファー

fill:none; この属性が追加されていない場合、デフォルトの塗りつぶしの色は黒になります

塗りつぶし、透明度、およびストロークの属性が非常に興味深いことがわかりました。ストローク-ラインキャップですが、最も一般的に使用されるエフェクトはストローク-ダシャレーとストローク-ダッシュオフセットです。

• blood-miterlimitはストロークの交差（鋭角）の表現を表します。デフォルトのサイズは 4 です。ベベルに対する角度の損失は何を意味しますか? 値が大きいほど、損失は小さくなります。具体的に何をするのかは分かりません。その他の情報も確認できます。 stroke-miterlimit 表示描边相交（锐角）的表现方式。默认大小是4. 什么斜角转斜面的角度损耗之类的意思，值越大，损耗越小。具体干嘛的，我自己也不确定。大家可查查其他资料。

• stroke-dasharray 表示虚线描边。可选值为：none, <dasharray>, inherit. 其中，none表示不是虚线；<dasharray>为一个逗号或空格分隔的数值列表。表示各个虚线端的长度。可以是固定的长度值，也可以是百分比值；inherit表继承。

• stroke-dashoffset 表示虚线的起始偏移。可选值为：<percentage>, <length>, inherit. 百分比值，长度值，继承。

• stroke-opacity 表示描边透明度。默认是1.

特别佩服作者列举的一个生动形象的例子：

一根火腿肠12厘米，要在上面画虚线，虚线间隔有15厘米，如果没有dashoffset，则火腿肠前面15厘米会被辣椒酱覆盖！实际上只有12厘米，因此，我们看到的是整个火腿肠都有辣椒酱。现在，dashoffset也是15厘米，也就是虚线要往后偏移15厘米，结果，辣椒酱要抹在火腿肠之外，也就是火腿肠上什么辣椒酱也没有。如果换成上面的直线SVG，也就是直线看不见了。我们把dashoffset

stroke-dasharray は、破線のストロークを表します。オプションの値は次のとおりです: none、<dasharray>、inherit このうち、none は、点線; <dasharray> は、カンマまたはスペースで区切られた値のリストです。点線の各端の長さを示します。固定長値またはパーセント値を指定できます。inherit テーブル継承。

blood-dashoffset は、破線の開始オフセットを表します。オプションの値は、<percentage>、<length>、inherit です。パーセンテージ値、長さ値、継承。

🎜🎜ストローク不透明度はストロークの透明度を表します。デフォルトは 1 です。🎜🎜私は特に著者がリストした鮮やかな例に感心します: 🎜🎜ハムソーセージは 12 センチメートルで、その上に点線を引く必要があります。 dashoffset がない場合は、ハムソーセージの手前 15 cm がチリソースで覆われます。実際には12センチメートルしかないので、私たちが見ているのはチリソースがかかった丸ごとのソーセージです。ここで、dashoffset も 15 センチメートルです。つまり、点線は 15 センチメートル後ろに移動する必要があります。その結果、チリソースはハム ソーセージの外側に適用される必要があります。これは、チリソースが存在しないことを意味します。ハムソーセージにソース。上の直線SVGに変更すると直線が見えなくなります。 dashoffset の値を徐々に小さくしていくと、ハムソーセージにチリソースが少しずつ現れ、ハムソーセージの根元からチリソースが塗りたくられるようになります。 🎜りー🎜 🎜🎜🎜🎜

以上がSVG ネオン効果の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。