Animation-svg Reference v1.0 </doc>
jeongahstory.co.kr
SVG
스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식이다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능하다.
- IE9 이상 지원합니다.
- XML을 이용하여 라인, 곡선, 기하학적인 그래픽 표현이 가능합니다.
- 벡터 방식이기 때문에 확대하거나 축소가 가능합니다.
- DOM 단위로 컨트롤이 되어 문서 복잡도가 증가되어 렌더링이 느립니다.
Rect
스정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능하다.
- IE9 이상 지원합니다.
- XML을 이용하여 라인, 곡선, 기하학적인 그래픽 표현이 가능합니다.
- 벡터 방식이기 때문에 확대하거나 축소가 가능합니다.
- DOM 단위로 컨트롤이 되어 문서 복잡도가 증가되어 렌더링이 느립니다.
Rect View
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SVG</title>
<style>
svg {width: 160px; height: 160px; background: #ffebee;}
.rect1 {width:100px; height:100px; fill:#f48fb1; x:30; y:30;}
.rect2 {width:100px; height:100px; fill:#f48fb1; x:30; y:30; stroke-width:5; stroke:#880e4f;}
#canvas {width: 160px; height: 160px; background: #ffebee;}
</style>
</head>
<body>
<svg>
<rect class="rect1" x="30" y="30"></rect>
</svg>
<svg>
<rect class="rect2" x="30" y="30"></rect>
</svg>
<canvas id="canvas">
</canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#f48fb1";
ctx.fillRect(50,25,200,100);
</script>
</body>
</html>
Circle
둥근원 만들기 View
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>SVG Circle</title>
<style>
svg {width: 160px; height: 160px; background: #ffebee;}
.circle1 {fill: #f48fb1; }
.circle2 {fill: #f48fb1; stroke:#880e4f; stroke-width:5;}
</style>
</head>>
<body>
<svg>
<circle cx="80" cy="80" r="60" class="circle1"></circle>
</svg>
<svg>
<circle cx="80" cy="80" r="60" class="circle2"></circle>
</svg>
<svg>
</svg>
<canvas id="canvas"></canvas>
<!-- //캔버스 이용하여 원 만들기-->
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx.arc(150,120,80,0, Math.PI*2);
ctx.strokeStyle='pink';
ctx.stroke();
ctx.fillStyle = 'pink';
ctx.fill();
</script>
</body>
</html>
Ellipse
둥근 만들기 View
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>SVG Circle</title>
<style>
svg {width: 200px; height: 200px; background: #ffebee;}
.ellipse1 {fill: #f48fb1; }
.ellipse2 {fill: #f48fb1; stroke:#880e4f; stroke-width:5;}
.ellipse3 {fill: #f48fb1; }
</style>
</head>
<body>
<svg>
<ellipse cx="100" cy="100" rx="90" ry="90" class="ellipse1"></ellipse>
</svg>
<svg>
<ellipse cx="100" cy="100" rx="90" ry="90" class="ellipse2"></ellipse>
</svg>
<svg>
<ellipse cx="100" cy="100" rx="90" ry="50" class="ellipse3"></ellipse>
</svg>
<canvas id="canvas"> </canvas>
<!-- //캔버스 이용하여 원 만들기-->
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx.arc(150,120,80,0, Math.PI*2);
ctx.strokeStyle='pink';
ctx.stroke();
ctx.fillStyle = 'pink';
ctx.fill();
</script>
</body>
</html>
Polygon
다각형 만들기 View
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>SVG Circle</title>
<style>
svg {width: 200px; height: 200px; background: #ffebee;}
.polaygon1 {fill: #f48fb1; }
.polaygon2 { fill: #f48fb1; }
.polaygon3 { fill: #f48fb1; }
.polaygon4 { fill: #f48fb1; }
.polaygon5 { fill: #f48fb1; }
</style>
</head>
<body>
<svg>
<polygon class="polaygon1" points="14.517,128.35 134.587,7.109 179.55,171.713 "></polygon>
</svg>
<svg>
<polygon class="polaygon2" points="56.582,161.428 29.748,78.841 100,27.799 170.253,78.841
143.419,161.428 "></polygon>
</svg>
<svg>
<polygon class="polaygon3" points= "55.984,176.237 11.969,100 55.984,23.763 144.016,23.763
188.031,100 144.016,176.237"></polygon>
</svg>
<svg>
<polygon class="polaygon4" points="157.748,182.563 101.959,155.05 47.667,185.411
56.594,123.851 10.943,81.597 72.249,71.063 98.327,14.589 127.289,69.64 189.057,76.989 145.652,121.546 "></polygon>
</svg>
<svg>
<polygon class="polaygon5" points="146.667,174.001 121.35,139.211 138.609,178.624
117.202,141.302 130.098,182.35 112.852,142.932 121.234,185.133 108.352,144.08 112.121,186.941 103.753,144.736 102.867,187.754
99.11,144.893 93.579,187.562 94.478,144.545 84.366,186.365 89.911,143.698 75.336,184.181 85.461,142.363 66.595,181.032
81.183,140.555 58.247,176.957 77.125,138.294 50.387,172.004 73.335,135.607 43.109,166.229 69.858,132.527 36.499,159.701
66.734,129.09 30.632,152.498 64,125.334 25.579,144.701 61.688,121.305 21.398,136.404 59.826,117.05 18.14,127.705
58.434,112.618 15.84,118.703 57.53,108.063 14.528,109.506 57.124,103.435 14.217,100.221 57.22,98.791 14.913,90.957
57.818,94.184 16.605,81.822 58.91,89.669 19.276,72.924 60.484,85.299 22.893,64.367 62.522,81.124 27.414,56.25 64.999,77.194
32.786,48.671 67.886,73.556 38.946,41.716 71.15,70.25 45.822,35.469 74.752,67.317 53.333,30.001 78.65,64.791 61.391,25.377
82.798,62.7 69.902,21.652 87.148,61.071 78.766,18.869 91.649,59.921 87.878,17.061 96.247,59.265 97.133,16.248 100.89,59.11
106.422,16.44 105.521,59.458 115.635,17.636 110.09,60.304 124.664,19.821 114.539,61.639 133.404,22.97 118.817,63.448
141.754,27.045 122.875,65.708 149.613,31.999 126.665,68.394 156.891,37.773 130.143,71.474 163.502,44.3 133.266,74.912
169.368,51.504 136,78.667 174.421,59.3 138.312,82.697 178.602,67.597 140.174,86.952 181.86,76.297 141.566,91.384
184.159,85.298 142.47,95.94 185.472,94.496 142.877,100.567 185.782,103.781 142.78,105.211 185.087,113.045 142.183,109.818
183.395,122.18 141.09,114.333 180.724,131.078 139.516,118.703 177.106,139.635 137.479,122.878 172.586,147.752 135.002,126.808
167.214,155.331 132.113,130.446 161.054,162.285 128.85,133.752 154.178,168.533 125.248,136.686 "></polygon>
</svg>
</body>
</html>
line
라인 만들기 View
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>SVG Circle</title>
<style>
svg {width: 200px; height: 200px; background: #ffebee;}
.line1 {fill: none; stroke:#880e4f; stroke-width: 2px; }
.line2 {fill: none; stroke:#880e4f; stroke-width: 2px; }
.line3 {fill: none; stroke:#880e4f; stroke-width: 2px; }
</style>
</head>
<body>
<svg>
<line x1="0" y1="0" x2="200" y2="200" class="line1"></line>
</svg>
<svg>
<line x1="50" y1="50" x2="200" y2="200" class="line2"></line>
</svg>
<svg>
<polyline x1="0" y1="0" x2="200" y2="200" class="line3" points="26,47 90.667,178.334 172,131.667 131,60.333
48.667,145.667 "></polyline>
</svg>
</body>
</html>
path
- d : 패스를 만드는 정보를 의미합니다.
- m : Movetool(이동)
- l : lineto(라인)
- h : horizontal linetool(수평선)
- v : vertical linetool (수직선)
- c : curveto (곡선)
- s : smooth curveto (부드러운 곡선)
- q : quadratic Bezier curveto(2차 베지어 곡선)
- t : smooth quadractic Bezier curveto (부드러운 2차 베지어 곡선)
- a : elliptical Arc(둥근 모양)
- z : closepath (닫힌 패스)
- 대문자일 경우는 절대 포지션을, 소문자일 경우에는 상대 포지션을 의미합니다.
패스 만들기 View
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>SVG Circle</title>
<style>
svg {width: 200px; height: 200px; background: #ffebee;}
.path1 {fill: none; stroke:#880e4f; stroke-width: 2px; }
.path2 {fill: none; stroke:#880e4f; stroke-width: 2px; }
.path3 {fill: none; stroke:#880e4f; stroke-width: 2px; }
.path4 {fill: none; stroke:#880e4f; stroke-width: 2px; }
.path5 {fill: none; stroke:#880e4f; stroke-width: 2px; }
.path6 {fill: none; stroke:#880e4f; stroke-width: 2px; }
.path7 {fill: none; stroke:#880e4f; stroke-width: 2px; }
</style>
</head>
<body>
<svg>
<path class="path1" d="M22.333,28c0,89.728,72.606,162.334,162.333,162.334"></path>
</svg>
<svg>
<path class="path2" d="M169.258,143.102c-32.813,32.813-86.014,32.813-118.828,0
c-26.25-26.251-26.25-68.812,0-95.063c21-21.001,55.049-21.001,76.05,0c16.801,16.801,16.8,44.039,0,60.84
c-13.441,13.44-35.232,13.44-48.672,0c-10.752-10.752-10.752-28.186,0-38.938c8.602-8.602,22.548-8.602,31.151,0
c6.881,6.882,6.881,18.039-0.001,24.92c-5.505,5.505-14.431,5.505-19.936,0c-4.404-4.404-4.404-11.545,0-15.948
c3.523-3.524,9.235-3.524,12.759,0c2.818,2.818,2.818,7.388,0,10.207c-2.255,2.255-5.911,2.255-8.166,0
c-1.804-1.805-1.804-4.729,0-6.533"></path>
</svg>
<svg>
<path class="path3" d="M121.28,123.75c32.105,35.834-25.663,56.132-23.027,8.091
c-2.636,48.041-57.837,21.545-22.003-10.561c-35.834,32.105-56.132-25.663-8.091-23.027C20.118,95.618,46.614,40.416,78.72,76.25
c-32.106-35.834,25.662-56.132,23.027-8.091c2.635-48.041,57.837-21.545,22.003,10.561c35.834-32.106,56.132,25.662,8.091,23.027
C179.882,104.382,153.386,159.584,121.28,123.75z"></path>
</svg>
<svg>
<path class="path4" d="M145.22,159.543c-30.146-39.695-41.041-34.854-32.684,14.522
c-8.357-49.377-20.255-50.152-35.691-2.326c15.437-47.826,5.263-54.042-30.52-18.647c35.783-35.395,29.664-45.627-18.359-30.697
c48.022-14.93,47.359-26.833-1.991-35.709c49.35,8.876,54.294-1.973,14.833-32.546c39.461,30.573,48.881,23.265,28.26-21.924
c20.621,45.189,32.358,43.096,35.209-6.281c-2.852,49.377,8.514,52.978,34.096,10.802c-25.582,42.176-17.191,50.646,25.172,25.409
c-42.363,25.236-38.87,36.635,10.479,34.197c-49.35,2.438-51.555,14.155-6.615,35.149
C122.47,110.497,115.073,119.848,145.22,159.543z"></path>
</svg>
<svg>
<path class="path5" d="M105,175c-9-5-16-12-22-21c-6-10-8-20-11-31c-1-1-1-3-3-2
c-6,3-7,10-8,16c0,11,3,22,9,32c-10-18-12-38-6-58c0-2,1-5-1-6c-8-2-12,7-15,12c-6,10-7,20-6,31c-3-22,8-42,23-58c0-1,1-3-1-4
c-6-2-12,1-17,4c-10,7-16,16-21,26c8-20,25-34,46-40c1-1,3-2,3-3c0-4-5-5-8-6c-15-3-28,4-40,13c6-5,12-8,19-11c13-5,27-5,41-3
c2,0,4-2,3-5c-9-15-30-15-45-12c21-5,42,1,59,15c1,0,4,1,5-1c1-4,0-7-2-11c-7-12-19-19-32-23c21,5,37,21,45,40c2,4,6,3,7,0
c5-16-5-31-15-43c15,15,21,36,20,57c0,1,1,4,3,4c4-1,7-5,9-9c4-12,6-25,1-37c7,19,1,40-8,57c0,2-2,4-1,6c1,0,2,1,2,1
c17-2,27-20,29-36c-2,22-19,36-36,49c-1,2-1,4,1,5c17,5,32-7,42-19c-13,17-34,25-55,26c-2,0,0,3-2,2c0,1,0,1,0,2c4,7,11,8,18,9
c9,1,19,0,28-5c-18,10-40,6-59-2c-1,0-3,0-4,0c0,1-1,2-1,2c4,18,24,24,40,26c-21-2-39-14-54-31c-2-2-5,2-5,5C80,154,92,167,105,175
L105,175z"></path>
</svg>
<svg>
<path class="path6" d="M100,14.841c0,77.248,1.806,81.822,19.438,49.233
c-17.633,32.589-12.932,31.149,50.61-15.5c-63.542,46.648-65.991,50.912-26.374,45.893c-39.617,5.019-35.561,7.796,43.676,29.906
c-79.236-22.109-84.097-21.366-52.327,7.995c-31.77-29.361-31.412-24.457,3.85,52.791C103.611,107.911,100,104.574,100,149.234
c0-44.66-3.611-41.323-38.875,35.925c35.264-77.248,35.621-82.152,3.85-52.791c31.771-29.361,26.911-30.104-52.325-7.995
c79.235-22.109,83.293-24.887,43.675-29.906c39.618,5.019,37.168,0.755-26.374-45.893c63.542,46.648,68.244,48.088,50.613,15.5
C98.194,96.663,100,92.089,100,14.841z"></path>
</svg>
<svg>
<path class="path1" d="M157.54,149.5c-15.07,2.97-30.14,3.96-45.21,2.97
c-19.18-1.979-35.62-9.899-52.06-16.83c-10.96-3.96-23.29-2.97-28.77,5.94c-4.11-10.89-5.48-21.78-4.11-32.67
c2.74-13.86,13.7-25.74,23.29-37.62c5.48-7.92,4.11-16.83-8.22-20.79c15.07-2.97,30.14-3.96,45.21-2.97
c19.18,1.98,35.62,9.9,52.061,16.83c10.96,3.96,23.289,2.97,28.77-5.94c4.11,10.89,5.48,21.78,4.11,32.67
c-2.74,13.86-13.7,25.74-23.29,37.62C143.84,136.63,145.21,145.54,157.54,149.5L157.54,149.5z"></path>
</svg>
</body>
</html>
slinecap/dasharry
라인 캡 만들기 View
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>SVG Circle</title>
<style>
svg {
width: 200px;
height: 200px;
background: #ffebee;
}
.path1 {
fill: none;
stroke: #880e4f;
stroke-width: 2px;
}
.path2 {
fill: none;
stroke: #880e4f;
stroke-width: 2px;
}
</style>
</head>
<body>
<svg>
<path stroke-width="1" fill="none" stroke="#e65100" d="m30 30 l140 00"></path>
<path stroke-width="2" fill="none" stroke="#e65100" d="m30 50 l140 00"></path>
<path stroke-width="3" fill="none" stroke="#e65100" d="m30 70 l140 00"></path>
<path stroke-width="4" fill="none" stroke="#e65100" d="m30 90 l140 00"></path>
<path stroke-width="5" fill="none" stroke="#e65100" d="m30 110 l140 00"></path>
<path stroke-width="6" fill="none" stroke="#e65100" d="m30 130 l140 00"></path>
<path stroke-width="7" fill="none" stroke="#e65100" d="m30 150 l140 00"></path>
<path stroke-width="8" fill="none" stroke="#e65100" d="m30 170 l140 00"></path>
</svg>
<svg>
<path stroke-width="1" stroke-linecap="round" fill="none" stroke="#880e4f" d="m30 30 l140 00"></path>
<path stroke-width="2" stroke-linecap="round" fill="none" stroke="#880e4f" d="m30 50 l140 00"></path>
<path stroke-width="3" stroke-linecap="round" fill="none" stroke="#880e4f" d="m30 70 l140 00"></path>
<path stroke-width="4" stroke-linecap="round" fill="none" stroke="#880e4f" d="m30 90 l140 00"></path>
<path stroke-width="5" stroke-linecap="round" fill="none" stroke="#880e4f" d="m30 110 l140 00"></path>
<path stroke-width="6" stroke-linecap="round" fill="none" stroke="#880e4f" d="m30 130 l140 00"></path>
<path stroke-width="7" stroke-linecap="round" fill="none" stroke="#880e4f" d="m30 150 l140 00"></path>
<path stroke-width="8" stroke-linecap="round" fill="none" stroke="#880e4f" d="m30 170 l140 00"></path>
</svg>
<svg>
<path stroke-width="1" stroke-linecap="butt" fill="none" stroke="#e65100" d="m30 30 l140 00"></path>
<path stroke-width="2" stroke-linecap="square" fill="none" stroke="#e65100" d="m30 50 l140 00"></path>
<path stroke-width="3" stroke-linecap="round" fill="none" stroke="#e65100" d="m30 70 l140 00"></path>
<path stroke-width="4" stroke-linecap="butt" fill="none" stroke="#e65100" d="m30 90 l140 00"></path>
<path stroke-width="5" stroke-linecap="square" fill="none" stroke="#e65100" d="m30 110 l140 00"></path>
<path stroke-width="6" stroke-linecap="round" fill="none" stroke="#e65100" d="m30 130 l140 00"></path>
<path stroke-width="7" stroke-linecap="butt" fill="none" stroke="#e65100" d="m30 150 l140 00"></path>
<path stroke-width="8" stroke-linecap="square" fill="none" stroke="#e65100" d="m30 170 l140 00"></path>
</svg>
<svg>
<path stroke-width="1" stroke-dasharray="5,5" fill="none" stroke="#880e4f" d="m30 30 l140 00"></path>
<path stroke-width="2" stroke-dasharray="5,5" fill="none" stroke="#880e4f" d="m30 50 l140 00"></path>
<path stroke-width="3" stroke-dasharray="5,5" fill="none" stroke="#880e4f" d="m30 70 l140 00"></path>
<path stroke-width="4" stroke-dasharray="5,5" fill="none" stroke="#880e4f" d="m30 90 l140 00"></path>
<path stroke-width="5" stroke-dasharray="5,5" fill="none" stroke="#880e4f" d="m30 110 l140 00"></path>
<path stroke-width="6" stroke-dasharray="5,5" fill="none" stroke="#880e4f" d="m30 130 l140 00"></path>
<path stroke-width="7" stroke-dasharray="5,5" fill="none" stroke="#880e4f" d="m30 150 l140 00"></path>
<path stroke-width="8" stroke-dasharray="5,5" fill="none" stroke="#880e4f" d="m30 170 l140 00"></path>
</svg>
<br>
<svg>
<path stroke-width="1" stroke-linecap="round" stroke-dasharray="0,15" fill="none" stroke="#e65100" d="m30 30 l140 00"></path>
<path stroke-width="2" stroke-linecap="round" stroke-dasharray="0,15" fill="none" stroke="#e65100" d="m30 50 l140 00"></path>
<path stroke-width="3" stroke-linecap="round" stroke-dasharray="0,15" fill="none" stroke="#e65100" d="m30 70 l140 00"></path>
<path stroke-width="4" stroke-linecap="round" stroke-dasharray="0,15" fill="none" stroke="#e65100" d="m30 90 l140 00"></path>
<path stroke-width="5" stroke-linecap="round" stroke-dasharray="0,15" fill="none" stroke="#e65100" d="m30 110 l140 00"></path>
<path stroke-width="6" stroke-linecap="round" stroke-dasharray="0,15" fill="none" stroke="#e65100" d="m30 130 l140 00"></path>
<path stroke-width="7" stroke-linecap="round" stroke-dasharray="0,15" fill="none" stroke="#e65100" d="m30 150 l140 00"></path>
<path stroke-width="8" stroke-linecap="round" stroke-dasharray="0,15" fill="none" stroke="#e65100" d="m30 170 l140 00"></path>
</svg>
<svg>
<path stroke-width="1" stroke-linecap="round" stroke-dasharray="10,10" fill="none" stroke="#e65100" d="m30 30 l140 00"></path>
<path stroke-width="2" stroke-linecap="round" stroke-dasharray="10,10" fill="none" stroke="#e65100" d="m30 50 l140 00"></path>
<path stroke-width="3" stroke-linecap="round" stroke-dasharray="10,10" fill="none" stroke="#e65100" d="m30 70 l140 00"></path>
<path stroke-width="4" stroke-linecap="round" stroke-dasharray="10,10" fill="none" stroke="#e65100" d="m30 90 l140 00"></path>
<path stroke-width="5" stroke-linecap="round" stroke-dasharray="10,10" fill="none" stroke="#e65100" d="m30 110 l140 00"></path>
<path stroke-width="6" stroke-linecap="round" stroke-dasharray="10,10" fill="none" stroke="#e65100" d="m30 130 l140 00"></path>
<path stroke-width="7" stroke-linecap="round" stroke-dasharray="10,10"fill="none" stroke="#e65100" d="m30 150 l140 00"></path>
<path stroke-width="8" stroke-linecap="round" stroke-dasharray="10,10" fill="none" stroke="#e65100" d="m30 170 l140 00"></path>
</svg>
<svg>
<path stroke-width="1" stroke-linecap="round" stroke-dasharray="20,10,1,5,5,10" fill="none" stroke="#e65100" d="m30 30 l140 00"></path>
<path stroke-width="2" stroke-linecap="round" stroke-dasharray="20,10,1,5,5,10" fill="none" stroke="#e65100" d="m30 50 l140 00"></path>
<path stroke-width="3" stroke-linecap="round" stroke-dasharray="20,10,1,5,5,10" fill="none" stroke="#e65100" d="m30 70 l140 00"></path>
<path stroke-width="4" stroke-linecap="round" stroke-dasharray="20,10,1,5,5,10" fill="none" stroke="#e65100" d="m30 90 l140 00"></path>
<path stroke-width="5" stroke-linecap="round" stroke-dasharray="20,10,1,5,5,10" fill="none" stroke="#e65100" d="m30 110 l140 00"></path>
<path stroke-width="6" stroke-linecap="round" stroke-dasharray="20,10,1,5,5,10" fill="none" stroke="#e65100" d="m30 130 l140 00"></path>
<path stroke-width="7" stroke-linecap="round" stroke-dasharray="20,10,1,5,5,10" fill="none" stroke="#e65100" d="m30 150 l140 00"></path>
<path stroke-width="8" stroke-linecap="round" stroke-dasharray="20,10,1,5,5,10" fill="none" stroke="#e65100" d="m30 170 l140 00"></path>
</svg>
<svg>
<path stroke-width="1" stroke-linecap="round" stroke-dasharray="50,10,100" fill="none" stroke="#e65100" d="m30 30 l140 00"></path>
<path stroke-width="2" stroke-linecap="round" stroke-dasharray="50,10,100" fill="none" stroke="#e65100" d="m30 50 l140 00"></path>
<path stroke-width="3" stroke-linecap="round" stroke-dasharray="50,10,100" fill="none" stroke="#e65100" d="m30 70 l140 00"></path>
<path stroke-width="4" stroke-linecap="round" stroke-dasharray="50,10,100" fill="none" stroke="#e65100" d="m30 90 l140 00"></path>
<path stroke-width="5" stroke-linecap="round" stroke-dasharray="50,10,100" fill="none" stroke="#e65100" d="m30 110 l140 00"></path>
<path stroke-width="6" stroke-linecap="round" stroke-dasharray="50,10,100" fill="none" stroke="#e65100" d="m30 130 l140 00"></path>
<path stroke-width="7" stroke-linecap="round" stroke-dasharray="50,10,100" fill="none" stroke="#e65100" d="m30 150 l140 00"></path>
<path stroke-width="8" stroke-linecap="round" stroke-dasharray="50,10,100" fill="none" stroke="#e65100" d="m30 170 l140 00"></path>
</svg>
</body>
</html>
Gradient
그라디언트 만들기 View
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
svg {width: 200px; height: 200px; background: #ffebee;}
.polygon1 {stroke:#880e4f; stroke-width: 1px;}
.path1 {stroke:#880e4f; stroke-width: 0px; fill:none;}
.path2 {stroke:#880e4f; stroke-width: 1px;}
</style>
</head>
<body>
<svg>
<linearGradient id="linearGradient1" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color: #a18cd1" />
<stop offset="1" style="stop-color: #fbc2eb" />
</linearGradient>
<polygon points="14,98 160,16 158,183" fill="url(#linearGradient1)" class="polygon1"></polygon>
</svg>
<svg>
<path class="path2" fill="url(#linearGradient1)" d="M105,175c-9-5-16-12-22-21c-6-10-8-20-11-31c-1-1-1-3-3-2
c-6,3-7,10-8,16c0,11,3,22,9,32c-10-18-12-38-6-58c0-2,1-5-1-6c-8-2-12,7-15,12c-6,10-7,20-6,31c-3-22,8-42,23-58c0-1,1-3-1-4
c-6-2-12,1-17,4c-10,7-16,16-21,26c8-20,25-34,46-40c1-1,3-2,3-3c0-4-5-5-8-6c-15-3-28,4-40,13c6-5,12-8,19-11c13-5,27-5,41-3
c2,0,4-2,3-5c-9-15-30-15-45-12c21-5,42,1,59,15c1,0,4,1,5-1c1-4,0-7-2-11c-7-12-19-19-32-23c21,5,37,21,45,40c2,4,6,3,7,0
c5-16-5-31-15-43c15,15,21,36,20,57c0,1,1,4,3,4c4-1,7-5,9-9c4-12,6-25,1-37c7,19,1,40-8,57c0,2-2,4-1,6c1,0,2,1,2,1
c17-2,27-20,29-36c-2,22-19,36-36,49c-1,2-1,4,1,5c17,5,32-7,42-19c-13,17-34,25-55,26c-2,0,0,3-2,2c0,1,0,1,0,2c4,7,11,8,18,9
c9,1,19,0,28-5c-18,10-40,6-59-2c-1,0-3,0-4,0c0,1-1,2-1,2c4,18,24,24,40,26c-21-2-39-14-54-31c-2-2-5,2-5,5C80,154,92,167,105,175
L105,175z"></path>
</svg>
<svg>
<radialGradient id="radialGradient1" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color: #a18cd1" />
<stop offset="1" style="stop-color: #fbc2eb" />
</radialGradient>
<circle cx="100" cy="100" r="80" fill="url(#linearGradient1)" opacity="0.8"></circle>
</svg>
</body>
</html>
Clip-path
클립패스 만들기 View
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
svg {width: 200px; height: 200px; background: #ffebee;}
.polygon1 {stroke:#880e4f; stroke-width: 1px;}
.path2 {stroke:#880e4f; stroke-width: 1px; }
</style>
</head>
<body>
<svg>
<image xlink:href="img/heart.jpg" width="200" height="200" />
</svg>
<svg>
<image xlink:href="img/heart.jpg" width="200" height="200" clip-path="circle(100px at center)" />
</svg>
<svg>
<clipPath id="clipPath1">
<path class="path1" d="M93.926,111.318c-57.253,99.165-122.58-13.985-8.074-13.985
c-114.506,0-49.179-113.15,8.074-13.985c-57.253-99.165,73.401-99.165,16.148,0c57.253-99.165,122.58,13.985,8.074,13.985
c114.506,0,49.179,113.15-8.074,13.985C167.327,210.484,36.673,210.484,93.926,111.318z"></path>
</clipPath>
<image xlink:href="img/heart.jpg" width="200" height="200" clip-path="url(#clipPath1)" />
</svg>
<svg>
<clipPath id="clipPath2">
<path class="path1" d="M157.54,149.5c-15.07,2.97-30.14,3.96-45.21,2.97
c-19.18-1.979-35.62-9.899-52.06-16.83c-10.96-3.96-23.29-2.97-28.77,5.94c-4.11-10.89-5.48-21.78-4.11-32.67
c2.74-13.86,13.7-25.74,23.29-37.62c5.48-7.92,4.11-16.83-8.22-20.79c15.07-2.97,30.14-3.96,45.21-2.97
c19.18,1.98,35.62,9.9,52.061,16.83c10.96,3.96,23.289,2.97,28.77-5.94c4.11,10.89,5.48,21.78,4.11,32.67
c-2.74,13.86-13.7,25.74-23.29,37.62C143.84,136.63,145.21,145.54,157.54,149.5L157.54,149.5z"></path>
</clipPath>
<image xlink:href="img/heart.jpg" width="200" height="200" clip-path="url(#clipPath2)" />
</svg>
<svg>
<pattern id="pattern" patternUnits="useSpaceOnUse" width="200" height="200">
<image xlink:href="img/heart2.png" width="200" height="200"/>
</pattern>
<text x="40" y="120" font-size="45" font-weight="bold" fill="url(#pattern)" >JA'S</text>
</svg>
</body>
</html>
클립패스 움직임 만들기 View
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
svg {width: 200px; height: 200px; background: #ffebee;}
svg {background: #ffebee;}
.rect1 rect {
x: 30px; y: 30px; width: 140px; height: 140px;
stroke: #880e41; stroke-width: 5;
fill:none;
animation: rect1 4s infinite linear;
stroke-dashoffset: 100;
stroke-dasharray: 100;
}
.rect2 rect {
x: 30px; y:30px; width: 140px; height: 140px;
stroke: #880e41; stroke-width: 5; fill: none;
animation: rect2 4s infinite linear;
stroke-dashoffset: 300;
stroke-dasharray: 300;
}
.rect3 rect {x: 30px; y:30px; width: 140px; height: 140px;
stroke: #880e41; stroke-width: 5; fill: none;
animation: rect3 4s infinite linear;
stroke-dashoffset: 560;
stroke-dasharray: 560;
}
@keyframes rect1 {
0% {stroke: #880e41;stroke-dashoffset: 100;}
35% {stroke: #1b5e20;}
70% {stroke: #e65100;stroke-dashoffset: 0;}
100% {stroke: #880e41;}
}
@keyframes rect2 {
0% {stroke: #880e41;stroke-dashoffset: 200;}
35% {stroke: #1b5e20;}
70% {stroke: #e65100;stroke-dashoffset: 0;}
100% {stroke: #880e41;}
}
@keyframes rect3{
0% {stroke: #880e41; stroke-dashoffset: 560;}
35% {stroke: #1b5e20;}
70% {stroke: #e65100;}
100% {stroke: #880e41; stroke-dashoffset: 0;}
}
</style>
</head>
<body>
<svg class="rect1">
<rect />
</svg>
<svg class="rect2">
<rect />
</svg>
<svg class="rect3">
<rect />
</svg>
</body>
</html>
Text-Animation2
See the Pen SVG-Text Animation by jeongahlee (@jeongahlee) on CodePen.
Text-Animation3
See the Pen SVG - Text Animation3 by jeongahlee (@jeongahlee) on CodePen.