0

CSS animation で遊び倒す -SVG Line - - Qiitaを読んでいます。

  1. 破線の間隔が、SVG の線の長さと同じ値を探し、stroke-dasharrayに設定して、全てを隠します。

「SVG の線の長さと同じ値を探し」とはどのように探すのでしょうか?

コードの該当箇所の引用:

stroke-dasharray: 700px;
stroke-dashoffset: 700px;

700pxとあるので、SVGを描いている下記コードに700があるのかと思ったのですが、ありませんでした。

SVG部分(引用)

<svg
  width="288"
  height="175"
  viewBox="0 0 288 175"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M1 143.5C28.6 143.1 42.5 143.333 46 143.5C52.3333 128.834 70.2 108.3 91 143.5H109L113.5 174.5L133.5 1L159.5 174.5L167 143.5H201C208.167 134.5 227.5 121.9 247.5 143.5H287.5"
    stroke="black"
  />
</svg>

どうやって stroke-dasharray の値が決定されたのでしょうか?

1
  • 記事からリンクされている動画では、画像を見ながら適当に大きくしていって実験的に求めているようです。
    – letrec
    Commented 2021年8月7日 11:30

1 件の回答 1

1

指定する値は, SVG内の pathの長さ以上であればよいので 必ずしも同じでなくても構わないはず

デバッガーにその手の情報の取得が可能か不明だったので, 以下のようにして取得
JavaScriptから SVG参照できるように用意し, 実行することで, pathの長さが判明します
(実行前に, SVG 要素に id="pls"属性追加し(ここでは適当な名前), 参照できるようにした)

<script>
var path = document.querySelector('#pls path');
console.log(path.getTotalLength()); // 666.5587158203125
</script>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。