SVG (Scalable Vector Graphics)에서 텍스트를 사용한 작업
이전 글에서는 SVG를 사용하여 모양을 만들었습니다. 이 게시물에서 제목이 말했듯이, 우리는 SVG로 텍스트 만들기. 평범한 HTML 텍스트가 할 수있는 것 이상으로 텍스트로 할 수있는 많은 것들이 있습니다..
자, 그들을 체크하자..
기본 구현
하지만 더 자세히 살펴보기 전에 SVG의 텍스트 그것의 아주 기본적인 수준에 형성된다 :
SVG의 텍스트는 위 코드에서 볼 수 있듯이 충분히 논리적 인 태그로 정의됩니다, 엑스 과 와이 베이스 라인 좌표를 지정하는 속성.
이미지 소스 : Wikipedia.org
텍스트가 어떻게 표시되는지 여기에 있습니다. 현재로서는 HTML의 일반 텍스트와 차이가없는 것 같습니다..
기본 텍스트 스타일
텍스트는 CSS 속성 (예 : 글꼴 두께, 글꼴 스타일, 과 텍스트 장식 이를 통해 인라인 스타일, 내부 스타일 또는 외부 스타일 이전 게시물에서 논의한 것처럼 CSS로 SVG 스타일 지정하기. 다음은 몇 가지 예입니다..
대담한
SVG (Scalable Vector Graphic)의 텍스트입니다.
이탤릭체
SVG (Scalable Vector Graphic)의 이탤릭체 텍스트입니다.
밑줄
이것은 SVG (Scalable Vector Graphic)에서 밑줄 친 텍스트입니다.
요소
경우에 따라 텍스트의 특정 부분에만 스타일이나 속성을 적용하려는 경우
이것은 대담하다. ,이탤릭체이다. 과이것은 밑줄이다.
쓰기 모드
텍스트는에서 작성된 것이 아닙니다. 왼쪽에서 오른쪽으로. 예를 들어 세계의 다른 지역에서는 텍스트가에서 작성된 것입니다. 위에서 아래로. SVG에서는 다음을 사용하여 수행 할 수 있습니다. 쓰기 모드 속성.
ぁ ぃ ぅ ぉ か き
위의 예제에서 우리는 몇 가지 임의의 일본어 문자를 넣었습니다. (그 의미를 물어 보지 마십시오. 실제로는 알 수 없습니다)이 스타일 선언으로 방향을 변경하십시오, 쓰기 모드 : tb, 어디에 결핵 서서있다 위에서 아래로.
텍스트 개요
SVG의 텍스트는 기본적으로 그래픽입니다., 그래서 우리는 또한 행정 우리가 다른 도형들과 마찬가지로 텍스트에 테두리 선을 추가하는 속성.
위의 코드 스 니펫에서 행정 속성을 가득 따르다 ~에 대한 속성 없음 그러면 다음 텍스트가 표시됩니다..
텍스트 경로
SVG에서 텍스트는 가로 및 세로로 표시 할 수있을뿐만 아니라 경로 패턴 따르기. 방법은 다음과 같습니다..
먼저, 경로. 그러나 경로를 HTML로 직접 작성하는 것은 그리 직관적이지 않습니다. 우리는 좌표와 일부 명령을 이해해야합니다. 대부분의 명령은 피하려고 노력할 것입니다. 따라서이 단계를 더 간단하게하기 위해 저는 개인적으로 벡터 편집기 (Inkscape 또는 Illustrator)를 열고 경로를 만들고 SVG 코드를 생성하는 방법을 제안합니다..
그런 다음 데프 여기서 정의를 의미합니다..
우리는 또한 신분증 속성을 신분증 우리의 텍스트에
Lorem ipsum dolor amet consectetur가 앉아 있습니다..
추가 읽기 : SVG 경로
텍스트 그라디언트
텍스트를 채울 배경을 추가하는 것도 SVG에서 가능하며 위의 텍스트 경로 섹션에서 성공했다면 훨씬 쉬울 것입니다.
먼저 그라디언트 색상을 정의해야합니다..
필요한 모든 정의가 설정되면 이제 텍스트를 추가하고 가득 따르다 그라디언트의 속성 신분증 다음과 같이
구배
그리고 여기 그것이 그라디언트가있는 텍스트입니다..
추가 읽기 : SVG 그라데이션 및 패턴
추가 참고 문헌
SVG의 텍스트는 의심 할 여지없이 강력합니다. 실제로이 게시물에서 수용 할 수있는 것 이상의 많은 작업을 수행 할 수 있습니다. 그래서 아래에서 우리는이 주제에 대한 여러분의 관심에 부응 할 수있는 몇 가지 참고 문헌을 추가했습니다..
- SVG의 글꼴 정보 - Divya Manian
- SVG 텍스트 공식 문서 - W3.org
- SVG Dovumentation at Mozilla Dev. 예제와 도구가 포함 된 네트워크 - MDN
- SVG 작성 모드 속성 - MDN
- 데모보기
- 소스 다운로드
