svg 텍스트 질문
282
작성한 질문수 9
안녕하세요 강사님 좋은 강의 많이 만들어주셔서 감사합니다
svg text를 사용해서 svg파일을 만들수는 없는걸까요?
예를들어 제가 text에 글귀를 넣고 style 태그에 구글폰트 임포트문도 추가하고 하여 글귀를 완성했습니다 html에서
이 svg 태그를 .svg확장자로 파일을만들고 안에 복사하니 오류가 떠서 문의드립니다! svg파일은 단순히 선이나 도형 그리기 외에는 html 태그 내에서 꾸며주어야 하는 부분으로 나눠서 생각해야 하는 건가요?
인터렉티브웹 강의에서 canvas를 활용이 무궁무진하더라구요 svg로는 단순한 아이콘 꾸미는것만 생각이 나는데 어떤 효과를 줄수 있을까요?
답변 1
0
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text
이 페이지의 예제를 보시면, <text>를 사용하고, 우리가 다른 요소에 작업하듯 <style>을 이용해 폰트 스타일 등 CSS를 적용하는 것을 보실 수 있습니다.
SVG는 주로 그래프나 데이터 시각화 분야에서 널리 쓰이는데요, 기본적으로 벡터이기 때문에 정말 여러가지로 응용하실 수 있습니다. 스크롤이나 마우스움직임, 스와이프에 따라 애니메이션 되는 인터랙션을 만들 수도 있고요. 수업 마지막에 만드는 예제도 그런 예시입니다.
viewBox 세팅에 따라 요소들이 컨테이너의 크기에 따라 유연하게 모두 조정되기 때문에, 내부 요소들이 유연하게 움직여야 하는 일반 UI에 사용하는 것도 개인적으로는 괜찮다고 생각하고 있습니다^^
svg 직접 그리기
0
59
1
SVG 파일 CSS 애니메이션
0
215
1
곡선에 따라 글자쓰기에서 path 대신 circle은 안되나요?
0
285
1
선생님 질문 있습니다! svg 태그에 object-fit: cover; 같은 속성을 적용하기는 어려울까요?
0
585
1
atom 서비스 종료, emmet 설치안됨
0
1425
1
SVG 태그 중 foreignObject 관련하여 질문드립니다.
0
1564
1
마스크가 안돼요..
0
431
2
강의 노션
0
404
1
강의 노션
0
341
1
마스크 2에서 배경으로 깔린 패턴 애니메이션이 멈춰있는 현상
1
237
1
path 를 x ,y로 이동
0
287
1
같은 페이지에 같은 svg 아이콘을 사용할 경우 id 값이 동일해도 되나요?
0
363
1
마스크2 돋보기 질문
0
391
1
압축에 관하여
0
280
1
svg 강의 스트로크 편 구현 에서 제가 적용하면 안되는게 있어요
0
418
2
패스 강의 관련 태그 질문 드립니다 ㅠ.ㅠ
0
514
1
글씨 깨짐
0
434
1
smil 무한반복 질문
0
236
1
SMIL 애니메이션 중복 관련 질문드립니다. ( + 융의 땅 관련 질문 추가...)
0
334
1
class name 정의 하실때 bem 방법 사용하시나요??
0
332
1
마스크 2 에서 질문있습니다.
0
265
1
path로 그린 svg 화면 꽉채우기
0
882
1
svg 파일 불러오기
0
369
1
svg 태그 질문!
0
234
1