[SVG]

dasharray

정의(Definition)

dasharray.

1. linecap

SVG를 이용한 linecap입니다.

Sample1

HTML

<div class="svgBox">
    <svg class="svg">
        <path stroke-width="1" stroke-linecap="spuare" fill="none" stroke="#e65100" d="m20 20 l120 00"></path>
        <path stroke-width="2" stroke-linecap="spuare" fill="none" stroke="#e65100" d="m20 40 l120 00"></path>
        <path stroke-width="3" stroke-linecap="spuare" fill="none" stroke="#e65100" d="m20 60 l120 00"></path>
        <path stroke-width="4" stroke-linecap="spuare" fill="none" stroke="#e65100" d="m20 80 l120 00"></path>
        <path stroke-width="5" stroke-linecap="spuare" fill="none" stroke="#e65100" d="m20 100 l120 00"></path>
        <path stroke-width="6" stroke-linecap="spuare" fill="none" stroke="#e65100" d="m20 120 l120 00"></path>
        <path stroke-width="7" stroke-linecap="spuare" fill="none" stroke="#e65100" d="m20 140 l120 00"></path>
    </svg>
    <svg class="svg">
        <path stroke-width="1" stroke-linecap="round" fill="none" stroke="#e65100" d="m20 20 l120 00"></path>
        <path stroke-width="2" stroke-linecap="round" fill="none" stroke="#e65100" d="m20 40 l120 00"></path>
        <path stroke-width="3" stroke-linecap="round" fill="none" stroke="#e65100" d="m20 60 l120 00"></path>
        <path stroke-width="4" stroke-linecap="round" fill="none" stroke="#e65100" d="m20 80 l120 00"></path>
        <path stroke-width="5" stroke-linecap="round" fill="none" stroke="#e65100" d="m20 100 l120 00"></path>
        <path stroke-width="6" stroke-linecap="round" fill="none" stroke="#e65100" d="m20 120 l120 00"></path>
        <path stroke-width="7" stroke-linecap="round" fill="none" stroke="#e65100" d="m20 140 l120 00"></path>
    </svg>
    <svg class="svg">
        <path stroke-width="1" stroke-linecap="butt" fill="none" stroke="#e65100" d="m20 20 l120 00"></path>
        <path stroke-width="2" stroke-linecap="butt" fill="none" stroke="#e65100" d="m20 40 l120 00"></path>
        <path stroke-width="3" stroke-linecap="butt" fill="none" stroke="#e65100" d="m20 60 l120 00"></path>
        <path stroke-width="4" stroke-linecap="butt" fill="none" stroke="#e65100" d="m20 80 l120 00"></path>
        <path stroke-width="5" stroke-linecap="butt" fill="none" stroke="#e65100" d="m20 100 l120 00"></path>
        <path stroke-width="6" stroke-linecap="butt" fill="none" stroke="#e65100" d="m20 120 l120 00"></path>
        <path stroke-width="7" stroke-linecap="butt" fill="none" stroke="#e65100" d="m20 140 l120 00"></path>
    </svg>
</div>

CSS

.svg {width: 160px; height: 160px; background: #ffebee;}

TOTAL

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>SVG</title>
    <style>
    .svgBox .svg {width: 160px; height: 160px; background: #ffebee;}
    </style>
</head>
<body>
    <div class="svgBox">
        <svg class="svg">
            <path stroke-width="1" stroke-linecap="spuare" fill="none" stroke="#e65100" d="m20 20 l120 00"></path>
            <path stroke-width="2" stroke-linecap="spuare" fill="none" stroke="#e65100" d="m20 40 l120 00"></path>
            <path stroke-width="3" stroke-linecap="spuare" fill="none" stroke="#e65100" d="m20 60 l120 00"></path>
            <path stroke-width="4" stroke-linecap="spuare" fill="none" stroke="#e65100" d="m20 80 l120 00"></path>
            <path stroke-width="5" stroke-linecap="spuare" fill="none" stroke="#e65100" d="m20 100 l120 00"></path>
            <path stroke-width="6" stroke-linecap="spuare" fill="none" stroke="#e65100" d="m20 120 l120 00"></path>
            <path stroke-width="7" stroke-linecap="spuare" fill="none" stroke="#e65100" d="m20 140 l120 00"></path>
        </svg>
        <svg class="svg">
            <path stroke-width="1" stroke-linecap="round" fill="none" stroke="#e65100" d="m20 20 l120 00"></path>
            <path stroke-width="2" stroke-linecap="round" fill="none" stroke="#e65100" d="m20 40 l120 00"></path>
            <path stroke-width="3" stroke-linecap="round" fill="none" stroke="#e65100" d="m20 60 l120 00"></path>
            <path stroke-width="4" stroke-linecap="round" fill="none" stroke="#e65100" d="m20 80 l120 00"></path>
            <path stroke-width="5" stroke-linecap="round" fill="none" stroke="#e65100" d="m20 100 l120 00"></path>
            <path stroke-width="6" stroke-linecap="round" fill="none" stroke="#e65100" d="m20 120 l120 00"></path>
            <path stroke-width="7" stroke-linecap="round" fill="none" stroke="#e65100" d="m20 140 l120 00"></path>
        </svg>
        <svg class="svg">
            <path stroke-width="1" stroke-linecap="butt" fill="none" stroke="#e65100" d="m20 20 l120 00"></path>
            <path stroke-width="2" stroke-linecap="butt" fill="none" stroke="#e65100" d="m20 40 l120 00"></path>
            <path stroke-width="3" stroke-linecap="butt" fill="none" stroke="#e65100" d="m20 60 l120 00"></path>
            <path stroke-width="4" stroke-linecap="butt" fill="none" stroke="#e65100" d="m20 80 l120 00"></path>
            <path stroke-width="5" stroke-linecap="butt" fill="none" stroke="#e65100" d="m20 100 l120 00"></path>
            <path stroke-width="6" stroke-linecap="butt" fill="none" stroke="#e65100" d="m20 120 l120 00"></path>
            <path stroke-width="7" stroke-linecap="butt" fill="none" stroke="#e65100" d="m20 140 l120 00"></path>
        </svg>
    </div>
</body>
</html>

2. dasharray

SVG를 이용한 dasharray입니다.

Sample2

HTML

<div class="svgBox">
    <svg class="svg">
        <path stroke-width="1" stroke-dasharray="5,5" fill="none" stroke="#e65100" d="m20 20 l120 00"></path>
        <path stroke-width="2" stroke-dasharray="5,5" fill="none" stroke="#e65100" d="m20 40 l120 00"></path>
        <path stroke-width="3" stroke-dasharray="5,5" fill="none" stroke="#e65100" d="m20 60 l120 00"></path>
        <path stroke-width="4" stroke-dasharray="5,5" fill="none" stroke="#e65100" d="m20 80 l120 00"></path>
        <path stroke-width="5" stroke-dasharray="5,5" fill="none" stroke="#e65100" d="m20 100 l120 00"></path>
        <path stroke-width="6" stroke-dasharray="5,5" fill="none" stroke="#e65100" d="m20 120 l120 00"></path>
        <path stroke-width="7" stroke-dasharray="5,5" fill="none" stroke="#e65100" d="m20 140 l120 00"></path>
    </svg>
    <svg class="svg">
        <path stroke-width="1" stroke-linecap="round" stroke-dasharray="0,15" fill="none" stroke="#e65100" d="m20 20 l120 00"></path>
        <path stroke-width="2" stroke-linecap="round" stroke-dasharray="0,15" fill="none" stroke="#e65100" d="m20 40 l120 00"></path>
        <path stroke-width="3" stroke-linecap="round" stroke-dasharray="0,15" fill="none" stroke="#e65100" d="m20 60 l120 00"></path>
        <path stroke-width="4" stroke-linecap="round" stroke-dasharray="0,15" fill="none" stroke="#e65100" d="m20 80 l120 00"></path>
        <path stroke-width="5" stroke-linecap="round" stroke-dasharray="0,15" fill="none" stroke="#e65100" d="m20 100 l120 00"></path>
        <path stroke-width="6" stroke-linecap="round" stroke-dasharray="0,15" fill="none" stroke="#e65100" d="m20 120 l120 00"></path>
        <path stroke-width="7" stroke-linecap="round" stroke-dasharray="0,15" fill="none" stroke="#e65100" d="m20 140 l120 00"></path>
    </svg>
    <svg class="svg">
        <path stroke-width="1" stroke-linecap="round" stroke-dasharray="10,10" fill="none" stroke="#e65100" d="m20 20 l120 00"></path>
        <path stroke-width="2" stroke-linecap="round" stroke-dasharray="10,10" fill="none" stroke="#e65100" d="m20 40 l120 00"></path>
        <path stroke-width="3" stroke-linecap="round" stroke-dasharray="10,10" fill="none" stroke="#e65100" d="m20 60 l120 00"></path>
        <path stroke-width="4" stroke-linecap="round" stroke-dasharray="10,10" fill="none" stroke="#e65100" d="m20 80 l120 00"></path>
        <path stroke-width="5" stroke-linecap="round" stroke-dasharray="10,10" fill="none" stroke="#e65100" d="m20 100 l120 00"></path>
        <path stroke-width="6" stroke-linecap="round" stroke-dasharray="10,10" fill="none" stroke="#e65100" d="m20 120 l120 00"></path>
        <path stroke-width="7" stroke-linecap="round" stroke-dasharray="10,10" fill="none" stroke="#e65100" d="m20 140 l120 00"></path>
    </svg>
    <svg class="svg">
        <path stroke-width="1" stroke-linecap="round" stroke-dasharray="20,10,1,5,5" fill="none" stroke="#e65100" d="m20 20 l120 00"></path>
        <path stroke-width="2" stroke-linecap="round" stroke-dasharray="20,10,1,5,5" fill="none" stroke="#e65100" d="m20 40 l120 00"></path>
        <path stroke-width="3" stroke-linecap="round" stroke-dasharray="20,10,1,5,5" fill="none" stroke="#e65100" d="m20 60 l120 00"></path>
        <path stroke-width="4" stroke-linecap="round" stroke-dasharray="20,10,1,5,5" fill="none" stroke="#e65100" d="m20 80 l120 00"></path>
        <path stroke-width="5" stroke-linecap="round" stroke-dasharray="20,10,1,5,5" fill="none" stroke="#e65100" d="m20 100 l120 00"></path>
        <path stroke-width="6" stroke-linecap="round" stroke-dasharray="20,10,1,5,5" fill="none" stroke="#e65100" d="m20 120 l120 00"></path>
        <path stroke-width="7" stroke-linecap="round" stroke-dasharray="20,10,1,5,5" fill="none" stroke="#e65100" d="m20 140 l120 00"></path>
    </svg>
</div>

CSS

.svg {width: 160px; height: 160px; background: #ffebee;}

TOTAL

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>SVG</title>
    <style>
        .svgBox .svg {width: 160px; height: 160px; background: #ffebee;}
    </style>
</head>
<body>
    <div class="svgBox">
        <svg class="svg">
            <path stroke-width="1" stroke-dasharray="5,5" fill="none" stroke="#e65100" d="m20 20 l120 00"></path>
            <path stroke-width="2" stroke-dasharray="5,5" fill="none" stroke="#e65100" d="m20 40 l120 00"></path>
            <path stroke-width="3" stroke-dasharray="5,5" fill="none" stroke="#e65100" d="m20 60 l120 00"></path>
            <path stroke-width="4" stroke-dasharray="5,5" fill="none" stroke="#e65100" d="m20 80 l120 00"></path>
            <path stroke-width="5" stroke-dasharray="5,5" fill="none" stroke="#e65100" d="m20 100 l120 00"></path>
            <path stroke-width="6" stroke-dasharray="5,5" fill="none" stroke="#e65100" d="m20 120 l120 00"></path>
            <path stroke-width="7" stroke-dasharray="5,5" fill="none" stroke="#e65100" d="m20 140 l120 00"></path>
        </svg>
        <svg class="svg">
            <path stroke-width="1" stroke-linecap="round" stroke-dasharray="0,15" fill="none" stroke="#e65100" d="m20 20 l120 00"></path>
            <path stroke-width="2" stroke-linecap="round" stroke-dasharray="0,15" fill="none" stroke="#e65100" d="m20 40 l120 00"></path>
            <path stroke-width="3" stroke-linecap="round" stroke-dasharray="0,15" fill="none" stroke="#e65100" d="m20 60 l120 00"></path>
            <path stroke-width="4" stroke-linecap="round" stroke-dasharray="0,15" fill="none" stroke="#e65100" d="m20 80 l120 00"></path>
            <path stroke-width="5" stroke-linecap="round" stroke-dasharray="0,15" fill="none" stroke="#e65100" d="m20 100 l120 00"></path>
            <path stroke-width="6" stroke-linecap="round" stroke-dasharray="0,15" fill="none" stroke="#e65100" d="m20 120 l120 00"></path>
            <path stroke-width="7" stroke-linecap="round" stroke-dasharray="0,15" fill="none" stroke="#e65100" d="m20 140 l120 00"></path>
        </svg>
        <svg class="svg">
            <path stroke-width="1" stroke-linecap="round" stroke-dasharray="10,10" fill="none" stroke="#e65100" d="m20 20 l120 00"></path>
            <path stroke-width="2" stroke-linecap="round" stroke-dasharray="10,10" fill="none" stroke="#e65100" d="m20 40 l120 00"></path>
            <path stroke-width="3" stroke-linecap="round" stroke-dasharray="10,10" fill="none" stroke="#e65100" d="m20 60 l120 00"></path>
            <path stroke-width="4" stroke-linecap="round" stroke-dasharray="10,10" fill="none" stroke="#e65100" d="m20 80 l120 00"></path>
            <path stroke-width="5" stroke-linecap="round" stroke-dasharray="10,10" fill="none" stroke="#e65100" d="m20 100 l120 00"></path>
            <path stroke-width="6" stroke-linecap="round" stroke-dasharray="10,10" fill="none" stroke="#e65100" d="m20 120 l120 00"></path>
            <path stroke-width="7" stroke-linecap="round" stroke-dasharray="10,10" fill="none" stroke="#e65100" d="m20 140 l120 00"></path>
        </svg>
        <svg class="svg">
            <path stroke-width="1" stroke-linecap="round" stroke-dasharray="20,10,1,5,5" fill="none" stroke="#e65100" d="m20 20 l120 00"></path>
            <path stroke-width="2" stroke-linecap="round" stroke-dasharray="20,10,1,5,5" fill="none" stroke="#e65100" d="m20 40 l120 00"></path>
            <path stroke-width="3" stroke-linecap="round" stroke-dasharray="20,10,1,5,5" fill="none" stroke="#e65100" d="m20 60 l120 00"></path>
            <path stroke-width="4" stroke-linecap="round" stroke-dasharray="20,10,1,5,5" fill="none" stroke="#e65100" d="m20 80 l120 00"></path>
            <path stroke-width="5" stroke-linecap="round" stroke-dasharray="20,10,1,5,5" fill="none" stroke="#e65100" d="m20 100 l120 00"></path>
            <path stroke-width="6" stroke-linecap="round" stroke-dasharray="20,10,1,5,5" fill="none" stroke="#e65100" d="m20 120 l120 00"></path>
            <path stroke-width="7" stroke-linecap="round" stroke-dasharray="20,10,1,5,5" fill="none" stroke="#e65100" d="m20 140 l120 00"></path>
        </svg>
    </div>
</body>
</html>

호환성(Compatibility) 더보기 caniuse.com

						6	7	8	9	10	11
<view>	사용가능	사용가능	사용가능	사용가능	사용가능	사용안됨	사용안됨	사용안됨	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능