[SVG] <path>

<path>

<path> 요소는 모양을 정의하는 일반적인 요소입니다. 패스를 통하여 모든 모양을 만들 수 있습니다.

<path>

<path> 요소는 모양을 그립니다.

정의(Definition)

<path> 요소는 모양을 정의하는 일반적인 요소입니다. 패스를 통하여 모든 모양을 만들 수 있습니다.

속성(Property)

속성	설명
d	결로의 모양을 설정합니다.
pathLength	패스의 총 길이 값을 설정합니다.

1. 패스

SVG를 이용한 패스입니다.

Sample1

HTML

<div class="svgBox">
    <svg class="svg">
        <path class="path1" d="M25.333,143C25.333,75.014,78.409,20,144,20"></path>
    </svg>
    <svg class="svg">
        <path class="path2" d="M148,102.666c-22.275,33.321-67.345,42.275-100.666,20
        c-26.657-17.82-33.82-53.876-16-80.533c14.256-21.326,43.101-27.056,64.426-12.8C112.82,40.738,117.405,63.814,106,80.874
        c-9.124,13.648-27.584,17.316-41.232,8.192c-10.919-7.3-13.853-22.068-6.554-32.986c5.839-8.735,17.654-11.083,26.39-5.243
        c6.987,4.672,8.865,14.124,4.193,21.111c-3.736,5.59-11.298,7.093-16.889,3.355c-4.472-2.99-5.674-9.039-2.685-13.511
        c2.392-3.578,7.231-4.539,10.809-2.147c2.862,1.914,3.631,5.785,1.717,8.647c-1.53,2.29-4.627,2.905-6.917,1.375"></path>
    </svg>
    <svg class="svg">
        <path class="path3" d="M102.919,116.293c9.027,12.951-12.605,22.414-15.988,6.994
        c3.383,15.42-20.224,15.884-17.449,0.343c-2.775,15.541-24.762,6.935-16.251-6.36c-8.511,13.295-25.531-3.067-12.58-12.095
        c-12.951,9.027-22.414-12.606-6.995-15.989c-15.419,3.383-15.882-20.224-0.342-17.448c-15.54-2.775-6.936-24.762,6.36-16.251
        c-13.296-8.511,3.069-25.532,12.095-12.581c-9.026-12.951,12.606-22.413,15.989-6.994c-3.383-15.419,20.224-15.883,17.448-0.343
        c2.775-15.54,24.762-6.936,16.252,6.36c8.51-13.296,25.531,3.069,12.58,12.095c12.951-9.026,22.413,12.605,6.993,15.989
        c15.42-3.384,15.884,20.223,0.343,17.448c15.541,2.775,6.936,24.764-6.359,16.252C128.31,112.225,111.946,129.244,102.919,116.293z"></path>
    </svg>
    <svg class="svg">
        <path class="path4" d="M122.041,127.017C86.666,88.757,81.826,91.463,95.66,141.77
        c-13.834-50.307-19.376-50.159-30.215,0.806c10.839-50.965,5.863-53.41-27.128-13.33c32.991-40.08,29.721-44.558-17.826-24.411
        c47.547-20.146,46.732-25.63-4.44-29.897c51.173,4.267,53-0.968,9.962-28.537c43.038,27.569,47.089,23.783,22.083-20.639
        c25.006,44.422,30.352,42.952,29.146-8.012c1.206,50.964,6.623,52.147,29.529,6.45c-22.906,45.697-18.659,49.262,23.151,19.434
        C88.111,73.462,90.214,78.591,141.387,71.6c-51.173,6.991-51.694,12.511-2.843,30.093C89.692,84.111,86.666,88.757,122.041,127.017z"></path>
    </svg>
    <svg class="svg">
        <path class="path5" d="M80.502,78.485c68.33,63.696,30.986,87.844-0.188,0.122
        c31.174,87.723-13.115,91.751-0.223,0.02c-12.893,91.731-53.98,74.717-0.207-0.085c-53.773,74.803-82.248,40.643-0.143-0.171
        c-82.104,40.814-91.442-2.667-0.047-0.219c-91.396-2.448-79.457-45.288,0.06-0.215C0.239,32.863,30.717,0.479,79.909,77.773
        C30.717,0.479,72.755-14.031,80.12,77.7c-7.364-91.731,36.602-85.043,0.221,0.034c36.381-85.077,72.203-58.724,0.18,0.132
        c72.023-58.856,91.494-18.874,0.098,0.201c91.396-19.074,90.056,25.377-0.007,0.224C170.675,103.444,148.832,142.181,80.502,78.485z"></path>
    </svg>
</div>

CSS

.svgBox .svg {width: 160px; height: 160px; background: #ffebee;}
.path1 {fill: none; stroke-width: 2; stroke: #880e4f;}
.path2 {fill: none; stroke-width: 2; stroke: #880e4f;}
.path3 {fill: none; stroke-width: 2; stroke: #880e4f;}
.path4 {fill: none; stroke-width: 2; stroke: #880e4f;}
.path5 {fill: none; stroke-width: 2; stroke: #880e4f;}

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;}
    .path1 {fill: none; stroke-width: 2; stroke: #880e4f;}
    .path2 {fill: none; stroke-width: 2; stroke: #880e4f;}
    .path3 {fill: none; stroke-width: 2; stroke: #880e4f;}
    .path4 {fill: none; stroke-width: 2; stroke: #880e4f;}
    .path5 {fill: none; stroke-width: 2; stroke: #880e4f;}
    </style>
</head>
<body>
    <div class="svgBox">
        <svg class="svg">
            <path class="path1" d="M25.333,143C25.333,75.014,78.409,20,144,20"></path>
        </svg>
        <svg class="svg">
            <path class="path2" d="M148,102.666c-22.275,33.321-67.345,42.275-100.666,20
            c-26.657-17.82-33.82-53.876-16-80.533c14.256-21.326,43.101-27.056,64.426-12.8C112.82,40.738,117.405,63.814,106,80.874
            c-9.124,13.648-27.584,17.316-41.232,8.192c-10.919-7.3-13.853-22.068-6.554-32.986c5.839-8.735,17.654-11.083,26.39-5.243
            c6.987,4.672,8.865,14.124,4.193,21.111c-3.736,5.59-11.298,7.093-16.889,3.355c-4.472-2.99-5.674-9.039-2.685-13.511
            c2.392-3.578,7.231-4.539,10.809-2.147c2.862,1.914,3.631,5.785,1.717,8.647c-1.53,2.29-4.627,2.905-6.917,1.375"></path>
        </svg>
        <svg class="svg">
            <path class="path3" d="M102.919,116.293c9.027,12.951-12.605,22.414-15.988,6.994
            c3.383,15.42-20.224,15.884-17.449,0.343c-2.775,15.541-24.762,6.935-16.251-6.36c-8.511,13.295-25.531-3.067-12.58-12.095
            c-12.951,9.027-22.414-12.606-6.995-15.989c-15.419,3.383-15.882-20.224-0.342-17.448c-15.54-2.775-6.936-24.762,6.36-16.251
            c-13.296-8.511,3.069-25.532,12.095-12.581c-9.026-12.951,12.606-22.413,15.989-6.994c-3.383-15.419,20.224-15.883,17.448-0.343
            c2.775-15.54,24.762-6.936,16.252,6.36c8.51-13.296,25.531,3.069,12.58,12.095c12.951-9.026,22.413,12.605,6.993,15.989
            c15.42-3.384,15.884,20.223,0.343,17.448c15.541,2.775,6.936,24.764-6.359,16.252C128.31,112.225,111.946,129.244,102.919,116.293z"></path>
        </svg>
        <svg class="svg">
            <path class="path4" d="M122.041,127.017C86.666,88.757,81.826,91.463,95.66,141.77
            c-13.834-50.307-19.376-50.159-30.215,0.806c10.839-50.965,5.863-53.41-27.128-13.33c32.991-40.08,29.721-44.558-17.826-24.411
            c47.547-20.146,46.732-25.63-4.44-29.897c51.173,4.267,53-0.968,9.962-28.537c43.038,27.569,47.089,23.783,22.083-20.639
            c25.006,44.422,30.352,42.952,29.146-8.012c1.206,50.964,6.623,52.147,29.529,6.45c-22.906,45.697-18.659,49.262,23.151,19.434
            C88.111,73.462,90.214,78.591,141.387,71.6c-51.173,6.991-51.694,12.511-2.843,30.093C89.692,84.111,86.666,88.757,122.041,127.017z"></path>
        </svg>
        <svg class="svg">
            <path class="path5" d="M80.502,78.485c68.33,63.696,30.986,87.844-0.188,0.122
            c31.174,87.723-13.115,91.751-0.223,0.02c-12.893,91.731-53.98,74.717-0.207-0.085c-53.773,74.803-82.248,40.643-0.143-0.171
            c-82.104,40.814-91.442-2.667-0.047-0.219c-91.396-2.448-79.457-45.288,0.06-0.215C0.239,32.863,30.717,0.479,79.909,77.773
            C30.717,0.479,72.755-14.031,80.12,77.7c-7.364-91.731,36.602-85.043,0.221,0.034c36.381-85.077,72.203-58.724,0.18,0.132
            c72.023-58.856,91.494-18.874,0.098,0.201c91.396-19.074,90.056,25.377-0.007,0.224C170.675,103.444,148.832,142.181,80.502,78.485z"></path>
        </svg>
    </div>
</body>
</html>

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

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