์ ์ ๋์ฌ ํํ๋ก ๋ง๋ค๊ธฐ (๊ฐ์ ๋ถ์ฌํ ๋งํผ ๋์ฌ๊ธธ์ด๊ฐ ๋์ด๋จ)
stroke-dasharray: (ํ์๋ฒ์งธ ์ธ์) (์ง์๋ฒ์งธ ์ธ์) ... โ ํ์ : ๋์ฌ์ ๊ธธ์ด | ์ง์ : ๊ณต๋ฐฑ์ ๊ธธ์ด
๐ ํ๋์ ์ธ์๋ง ์ฃผ์ด์ง๋ฉด, dasharray๊ฐ path์ ๊ฐ์ผ๋ฉด svg๊ฐ ๋ชจ๋ ๋ณด์ธ๋ค
๐ path์ ์ด ๊ธธ์ด ๊ตฌํ๋ JS ํจ์ โpath.getTotalLength( ) = 1000
ex) ๊ธธ์ด๊ฐ 1000์ธ path ์์๊ฐ ์์ ๋ stroke-dasharray : 100 100 ์ด๋ฉด,
๋์ฌ์ ๊ธธ์ด 100๊ณผ ๊ณต๋ฐฑ์ ๊ธธ์ด 100์ด 1000์ด ๋ ๋๊น์ง ๋ฐ๋ณต
์ด๋์๋ถํฐ ๊ทธ๋ฆด์ง svg ๋ํ๋ผ ์ง์ ์ ํ๊ธฐ
stroke-dashoffset: 1000 ์ด๋ฉด, ์ ์๋ณด์
stroke-dashoffset: 0 ์ด๋ฉด, ์ ๋ค๋ณด์๐ ์คํฌ๋กค์ ๋ฐ๋ผ์ ztroke-dashoffset์ 1000 ~ 0 ์ฌ์ด๋ก ๊ธธ์ด ๋ณ๊ฒฝ
ex) dasharray: 950์ผ ๋์ ์๋ก ๋ค๋ฅธ dashoffset์ ์ค ์์
๋น์จ ratio ๊ตฌํ๊ธฐ
ratio 0
ratio 1
โฆ ์ถ์ฒ : rudtjd2548/yummy-coding