본문 바로가기

Webstoryboy

Category

Explanation

SVG

[SVG] <text>

<text>

<text> 요소는 텍스트로 구성된 그래픽 요소를 그립니다.


<text>

<text> <use> 요소는 텍스트로 구성된 그래픽 요소를 그립니다.

정의(Definition)

  • <text> <use> 요소는 텍스트로 구성된 그래픽 요소를 그립니다.

1. 텍스트

SVG를 이용한 텍스트입니다.

Sample1
TEXT SVG TEXT
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 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
<text> 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능

참고(Reference)

  • MDN SVG
  • Scalable Vector Graphics (SVG)2

더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기