CSS animation で遊び倒す -SVG Line - - Qiitaを読んでいます。
- 破線の間隔が、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
の値が決定されたのでしょうか?