破線属性

破線属性には、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 = &#39;http://www.w3.org/2000/svg&#39;;var path = document.getElementsByTagNameNS(char, &#39;path&#39;)[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>

ログイン後にコピー

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

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

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