svg로 선을 그려보세요.

2049 단어 HTMLCSSSVG

사각형 점선



샘플 코드
html, css에서만 설명합니다.
hover하면 점선이 빙빙 돌립니다.



html
<svg viewBox="0 0 200 200">
    <polygon points="20,20 20,100 120,100, 120,20"/>
</svg>

css
svg {
    stroke: #09d;
    stroke-width: 2;
    stroke-dashoffset: 0;
    stroke-dasharray: 5;
    fill: none;
    -webkit-transition: all 2s ease-in-out;
}

svg:hover {
    stroke-dashoffset: 100;
    stroke-width: 1;
    stroke-dasharray: 3;    
}

좋은 웹페이지 즐겨찾기