SVG <라인>

SVG 라인-<line>

<line> 요소는 라인을 만드는 데 사용됩니다 :

<svg height="210" width="500">
  <line class="line" x1="0" y1="0" x2="200" y2="200" />
</svg>

<style>
.line {
    fill: none;
    stroke: red;
    stroke-width:3px;
    stroke-linecap:round;
    stroke-miterlimit:10;
    stroke-dasharray: 1353px;
    stroke-dashoffset: 1353px;
    animation: move 3s linear infinite;       
}  
@keyframes move {
    100% {stroke-dashoffset: 0;}
}
@-webkit-keyframes move {
    100% {stroke-dashoffset: 0;}
}
@-ms-keyframes move {
    100% {stroke-dashoffset: 0;}
} 
</style>

 

• x1 속성은 x 축에서 선의 시작을 정의합니다
• y1 속성은 y 축에서 선의 시작을 정의합니다
• x2 속성은 x 축에서 선의 끝을 정의합니다
• y2 속성은 y 축에서 선의 끝을 정의합니다