<text>
<text> 요소는 텍스트로 구성된 그래픽 요소를 그립니다.
<text>
<text> <use> 요소는 텍스트로 구성된 그래픽 요소를 그립니다.
정의(Definition)
- <text> <use> 요소는 텍스트로 구성된 그래픽 요소를 그립니다.
1. 텍스트 
SVG를 이용한 텍스트입니다.
Sample1
HTML
<div class="svgBox">
<svg class="svg">
<text x="10" y="100" font-size="45" font-family ="Kumar One">TEXT</text>
</svg>
<svg class="svg">
<pattern id="pattern1" patternUnits="userSpaceOnUse" width="160" height="160">
<image xlink:href="https://tistory2.daumcdn.net/tistory/2933724/skin/images/hover03.jpg" width="100%" hight="100%" />
</pattern>
<text x="25" y="100" font-size="45" font-family ="Kumar One" fill="url(#pattern1)">SVG</text>
</svg>
<svg class="svg">
<text x="10" y="100" font-size="45" fill="none" stroke="#880e4f" stroke-width="1" font-family ="Kumar One">TEXT</text>
</svg>
</div>CSS
.svgBox .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>
<link href="https://fonts.googleapis.com/css?family=Kumar+One&display=swap" rel="stylesheet">
<style>
.svgBox .svg {width: 160px; height: 160px; background: #ffebee;}
</style>
</head>
<body>
<div class="svgBox">
<svg class="svg">
<text x="10" y="100" font-size="45" font-family ="Kumar One">TEXT</text>
</svg>
<svg class="svg">
<pattern id="pattern1" patternUnits="userSpaceOnUse" width="160" height="160">
<image xlink:href="https://tistory2.daumcdn.net/tistory/2933724/skin/images/hover03.jpg" width="100%" hight="100%" />
</pattern>
<text x="25" y="100" font-size="45" font-family ="Kumar One" fill="url(#pattern1)">SVG</text>
</svg>
<svg class="svg">
<text x="10" y="100" font-size="45" fill="none" stroke="#880e4f" stroke-width="1" font-family ="Kumar One">TEXT</text>
</svg>
</div>
</body>
</html>2. 텍스트
CSS를 이용한 텍스트입니다.
Sample1
CSS
CSS
CSS
HTML
<div class="svgBox">
<div class="text-wrap">
<div class="text-clip1">
CSS
</div>
</div>
<div class="text-wrap">
<div class="text-clip2">
CSS
</div>
</div>
<div class="text-wrap">
<div class="text-clip3">
CSS
</div>
</div>
</div>CSS
.text-wrap {background-color: #ffebee; width: 160px; height: 160px; float: left; margin-right: 10px;}
.text-clip1 {
width: 160px; height: 160px;
line-height: 176px; text-align: center;
font-size: 45px;
font-family : "Kumar One";
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-image: url(https://tistory2.daumcdn.net/tistory/2933724/skin/images/hover03.jpg);
background-size: cover;
}
.text-clip2 {
width: 160px; height: 160px;
line-height: 176px; text-align: center;
font-size: 45px;
font-family : "Kumar One";
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-image: linear-gradient(-60deg, #ff5858 0%, #f09819 100%);
}
.text-clip3 {
width: 160px; height: 160px;
line-height: 176px; text-align: center;
font-size: 45px;
font-family : "Kumar One";
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 1px #000;
}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>
<link href="https://fonts.googleapis.com/css?family=Kumar+One&display=swap" rel="stylesheet">
<style>
.text-wrap {background-color: #ffebee; width: 160px; height: 160px; float: left; margin-right: 10px;}
.text-clip1 {
width: 160px; height: 160px;
line-height: 176px; text-align: center;
font-size: 45px;
font-family : "Kumar One";
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-image: url(https://tistory2.daumcdn.net/tistory/2933724/skin/images/hover03.jpg);
background-size: cover;
}
.text-clip2 {
width: 160px; height: 160px;
line-height: 176px; text-align: center;
font-size: 45px;
font-family : "Kumar One";
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-image: linear-gradient(-60deg, #ff5858 0%, #f09819 100%);
}
.text-clip3 {
width: 160px; height: 160px;
line-height: 176px; text-align: center;
font-size: 45px;
font-family : "Kumar One";
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 1px #000;
}
</style>
</head>
<body>
<div class="svgBox">
<div class="text-wrap">
<div class="text-clip1">
CSS
</div>
</div>
<div class="text-wrap">
<div class="text-clip2">
CSS
</div>
</div>
<div class="text-wrap">
<div class="text-clip3">
CSS
</div>
</div>
</div>
</body>
</html>호환성(Compatibility)
더보기
caniuse.com
 |
 |
 |
 |
 |
 6 |
 7 |
8 |
 9 |
 10 |
 11 |
 |
 |
 |
|
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| <text> | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
참고(Reference)
- MDN SVG
- Scalable Vector Graphics (SVG)2
