SVG (Scalable Vector Graphics) の破線関連のプロパティとライン アニメーションの原理: 動く線

SVGは非常にクールなラインアニメーションを実現できます

そのようなWebポータルでも

---

まずは簡単なSVGラインアニメーションを実装できます
このように

心配しないでください、その前にいくつかの属性値を理解するには

破線属性

破線属性には、2つのストローク-ダシャーレイとストローク-ダショオフセットが含まれています

ストローク-ダシャーレイ

以下の例を見てみましょう

 <svg width=300 height=300 viewbox="0 0 30 30">
    <path id="path_a" d="M 5 10 L 25 10"></path>
    <path id="path_b" d="M 5 15 L 25 15"></path>
    <path id="path_c" d="M 5 20 L 25 20"></path></svg>

rreee

3つの線分を設定しましたそれぞれ異なるストローク-ダシャーレイ

この属性が何に使われるのかはもう理解できたと思います
1つの値、点線の描画1px-空の1px-描画1px-空の1px-...
2つの値、点線の描画1px-empty 2px-draw 1px-empty 2px-...
3つの値、点線描画 1px-empty 2px-draw 3px-empty 1px-...
内部はループ

ストローク-ダッシュオフセット

この属性点線の位置を調整します

path {    
stroke: #000;}#path_a {    
stroke-dasharray: 1;}#path_b {    
stroke-dasharray: 1 2;}#path_c {   
 stroke-dasharray: 1 2 3;}

<svg width=300 height=300 viewbox="0 0 30 30">
    <path id="path_a" d="M 5 10 L 25 10"></path>
    <path id="path_b" d="M 5 15 L 25 15"></path>
    <path id="path_c" d="M 5 20 L 25 20"></path></svg>

値が正の数の場合、点線は後ろに移動します
値が負の数の場合、点線は前に移動します
px単位は書いても書かなくても大丈夫です

単純なSVGラインアニメーション

上記の点線関連の属性を理解しました
上記の最も単純なラインアニメーションはCSSを使用して簡単に実装できます
JSも必要ありません（SMILアニメーションも必要ありません）
原則は、ストローク-ダッシュオフセットの値を変更することですパスがゆっくりと表示されるようにします

path {    
stroke: #000;    
stroke-dasharray: 5;    
}#path_a {    
stroke-dashoffset: 2;}#path_b {    
stroke-dashoffset: 0;}#path_c {    
stroke-dashoffset: -2;}

<svg width=300 height=300 viewbox="0 0 30 30">
    <path d="M 5 15 L 25 15"></path></svg>

最初にストローク-ダッシュオフセットとストローク-ダッシュオフセットの線分の長さを設定します
この方法では、線分は見えなくなります
アニメーションアニメーションが使用される場合、ストローク-ダッシュオフセットは徐々に0になります
ここでforwards属性値を使えば実現できますanimation: act 1s linear forwards;
線画アニメーション

は確かに非常に賢い方法です

パス長の取得

上記の小さな例ではjsを使用していませんが
、実際にはまだより豪華で複雑な効果を実現するには、js と連携する必要があります
別の例を見てみましょう 小さな例では、パスの長さは簡単にわかります

しかし、パスの長さが不明な場合はどうすればよいですか

これには js が必要です

path {    
stroke: #000;    
stroke-dasharray: 20px;    
stroke-dashoffset: 20px;    
animation: act 1s linear infinite alternate;}@keyframes act {
    100% {        
    stroke-dashoffset: 0;    }}

さらに、パス上の始点xからの距離の座標を取得できるgetPointAtLength(x)もあります

(XMLタグの取得にはgetElementsByTagNameNSを使用します。実際にはここでもgetElementsByTagNameが使用できます)

---

それを通して、js を使用してもう少し複雑なグラフィックを作成できます

まず稲妻を描きます

var char = 'http://www.w3.org/2000/svg';var path = document.getElementsByTagNameNS(char, 'path')[0];
console.log(path.getTotalLength()); //20

rree

事前に @keyframes ルールを記述する必要があります

js スクリプトを取得する必要がありますパスの長さ

を入力し、スタイルを追加します

<svg width="580" height="400">
    <path d="m262.59622,90.56177l34.74561,60.80042l-14.32703,7.17541l43.75135,52.09264l-14.32061,
    8.69967l54.08581,87.23186l-91.73919,-66.84884l17.49797,-9.28344l-57,-42.81731l20.425,-13.23194l-60.18379,-44.91723l67.06487,-38.90124z"></svg>

もちろん、より複雑でカッコいいラインアニメーション

を実現したい場合は、より複雑なパスとスクリプトが必要になります

例えば以下のようになります

上記は、SVG (Scalable Vector Graphics) の点線関連の属性と線アニメーションの原理: 動く線の内容です。その他の関連内容については、PHP 中国語 Web サイト (www.php.cn ) をご覧ください。

🎜🎜