-
[에스비지] SVG -(09편)- 기본글자 쓰기 (feat. text)SVG 2021. 2. 6. 20:19
오늘 배울 것은 바로바로
<text></text>
기본적으로 글자를 쓸 때, text 라는 태그에 작성을 한다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>텍스트 쓰기</title> <style> .svg { width: 500px; height: 500px; background-color: #eee; } </style> </head> <body> <svg class="svg"> <text x="0" y="01">Hello, SVG!</text> </svg> </body> </html>이렇게 작성을 하니까,
화면이
코드 출력물이다. 글자를 쓴것이 영역 좌측 상단에서 약간만 보이고 있다. 텍스트 태그에 x와 y값을 잡아줘야 하는데,
둘다 0 0 으로 하니 콤마 끄트머리만 살짝 보여서,
y값만 1로 주니 저정도가 보였다.
기준점이 글자의 좌측 상단이 아니라,
좌측 하단이라는 것이 예상된다.
background 대신 fill
border 대신 stroke와 stroke-width를 줬는데,
text는 기존방식과 똑같이,
크기는 font-size
굵기는 font-weight
기울기는 font-style: italic;
이런 식으로 사용하면 된다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>텍스트 쓰기</title> <style> .svg { width: 500px; height: 500px; background-color: #eee; } text { font-size: 2em; font-weight: bold; font-style: italic; } </style> </head> <body> <svg class="svg"> <text x="50" y="50">Hello, SVG!</text> </svg> </body> </html>그러면 짜자잔!!!
코드에 화면 출력물. 글자를 2em으로 크게 하고, 두께를 굵게, 기울임체를 사용하였다. 단!!!,
다른점이 있다면,
기존 css에서 폰트의 색깔을 바꾸려면,
color 속성으로 변화를 줬다면,
svg의 text는
fill
이다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>텍스트 쓰기</title> <style> .svg { width: 500px; height: 500px; background-color: #eee; } text { font-size: 2em; font-weight: bold; font-style: italic; /* color: dodgerblue; */ fill: dodgerblue; } </style> </head> <body> <svg class="svg"> <text x="150" y="240">Hello, SVG!</text> </svg> </body> </html>이러고 나면
짜잔!!!!!!
코드 출력물. 회색바탕에 중간에 파란색으로 쓰여진 글자 Hello, SVG! 가 있다. 오늘은 여기까지!
inflearn에서 수강중인 1분코딩님의 svg 강의를 들으며 복습개념으로 블로그를 작성하고 있습니다.
저도 완벽하지 않아서 모르겠을 때 그때 그때 찾아보려고 작성합니다.
또한 이렇게 작성하며 완전히 내것이 되었으면 하는 바람이 있기도 합니다.
다른분들도 도움이 되길 바랍니다.
'SVG' 카테고리의 다른 글