80656


[CSS animation で遊び倒す -SVG Line - -
Qiita](https://qiita.com/duka/items/4ced752bb257884736f9)を読んでいます。

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

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

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

[code]

    stroke-dasharray: 700px;
    stroke-dashoffset: 700px;
    
[/code]

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

SVG部分（引用）

[code]

    <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>
    
[/code]

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


CC BY-SA 4.0
2021-08-07T09:55:04.877
80655
2021-08-07T11:28:06.660
9008
question
html css svg
SVG の線の長さと同じ値はどうやって探すんですか？


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

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

[code]

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


CC BY-SA 4.0
2021-08-07T11:28:06.660
80656
2021-08-07T11:28:06.660
43025
80655
answer