HTML5 3의 SVG 2D 소개 - 텍스트, 이미지 및 렌더링 소개 text_html5 튜토리얼 기술

SVG에서 텍스트 렌더링

SVG의 강력한 기능 중 하나는 이미지나 기타 플러그인을 사용하지 않고도 표준 HTML 페이지에서는 불가능한 수준으로 텍스트를 제어할 수 있다는 것입니다. 모양이나 경로에 대해 수행할 수 있는 모든 작업(예: 페인팅 또는 필터링)을 텍스트에 대해 수행할 수 있습니다. SVG의 텍스트 렌더링은 매우 강력하지만 여전히 한 가지 단점이 있습니다. SVG는 자동 단어 줄 바꿈을 수행할 수 없습니다. 텍스트가 허용된 공간보다 길면 잘라내기만 하면 됩니다. 대부분의 경우 여러 줄 문자를 작성하려면 여러 문자 요소가 필요합니다.
또한 tspan 요소를 사용하면 텍스트 요소를 여러 부분으로 나누어 각 부분이 고유한 스타일을 가질 수 있습니다.

또한 텍스트 요소에서 공백은 HTML과 유사하게 처리됩니다. 즉, 줄 바꿈 및 캐리지 리턴이 공백이 되고 여러 공백이 단일 공백으로 압축됩니다.

이미지에 직접 표시되는 텍스트 - 텍스트 요소
텍스트를 직접 표시하려면 텍스트 요소를 사용하면 됩니다.

코드 복사

코드는 다음과 같습니다.

SVG

표시된 바와 같습니다 위 예에서 텍스트 요소는 다음 속성을 설정할 수 있습니다. x,y는 텍스트 위치 좌표입니다. text-anchor는 텍스트 표시 방향이며 실제로는 텍스트의 위치(x, y)입니다. 이 속성에는 start, middle 및 end의 세 가지 값이 있습니다. start는 텍스트 위치 좌표(x, y)가 텍스트의 시작 부분에 있고, 이 지점부터 오른쪽으로 하나씩 텍스트가 표시된다는 의미입니다. Middle은 (x, y)가 텍스트의 중앙에 위치한다는 의미로, 텍스트가 양방향으로 표시되는데, 실제로는 중앙에 위치합니다. end는 (x, y) 지점이 텍스트의 끝에 있고, 텍스트가 왼쪽에 하나씩 표시된다는 의미입니다.

이러한 속성 외에도 다음 속성을 CSS에서 지정하거나 속성에서 직접 지정할 수 있습니다.

채우기, 획: 채우기 및 획 색상, 구체적인 사용법은 나중에 요약됩니다. 글꼴 관련 속성: 글꼴 모음, 글꼴 스타일, 글꼴 두께, 글꼴 변형, 글꼴 스트레치, 글꼴 크기, 글꼴 크기 조정, 커닝, 문자 간격, 단어 간격 및 텍스트 장식.

텍스트 범위 - tspan 요소
이 요소는 텍스트 요소에 대한 강력한 보완 요소로, 범위 내의 텍스트를 렌더링하는 데 사용되며 텍스트 요소 또는 tspan에만 나타날 수 있습니다. 하위 요소의 요소. 일반적인 사용법은 텍스트의 일부를 강조하는 것입니다. 예:

코드 복사

코드는 다음과 같습니다.

굵은 빨간색입니다

tspan 요소 설정에는 다음과 같은 속성이 있습니다. x, y는 포함된 텍스트의 절대 좌표를 설정하는 데 사용됩니다. 이 값은 기본 텍스트 위치를 재정의합니다. 이러한 속성에는 해당하는 각 단일 문자에 적용되는 일련의 숫자가 포함될 수 있습니다. 해당 설정이 없는 문자는 이전 문자 바로 뒤에옵니다. 예:

코드 복사

코드는 다음과 같습니다.

Hello World!
굵고 빨간색입니다> ;

dx,dy는 기본 텍스트 위치를 기준으로 포함된 텍스트의 오프셋을 설정하는 데 사용됩니다. 이러한 속성에는 일련의 숫자가 포함될 수도 있으며, 각 숫자는 해당 문자에 적용됩니다. 해당 설정이 없는 문자는 이전 문자 바로 뒤에옵니다. 위 예의 x를 dx로 대체하여 효과를 확인할 수 있습니다. 회전은 글꼴의 회전 각도를 설정하는 데 사용됩니다. 이 속성 페이지에는 각 문자에 적용되는 일련의 숫자가 포함될 수 있습니다. 해당 설정이 없는 문자는 마지막에 설정된 숫자를 사용합니다.

코드 복사

코드는 다음과 같습니다.

Hello World!
굵고 빨간색입니다

textLength: 이것은 가장 수수께끼 같은 속성입니다. 설정 후 렌더링에서 텍스트 길이가 이 값과 일치하지 않는 것으로 확인되면 이 길이가 우선한다고 합니다. 그러나 나는 그것을 시도하지 않았습니다.

텍스트 참조 - tref 요소
이 요소를 사용하면 정의된 텍스트를 참조하고 이를 현재 위치에 효율적으로 복사할 수 있으며 일반적으로 xlink:href와 함께 대상 요소를 지정합니다. 복사되기 때문에 CSS를 사용하여 현재 텍스트를 수정하면 원본 텍스트는 수정되지 않습니다. 예를 보세요:

코드 복사

코드는 다음과 같습니다.

예제 텍스트입니다.

텍스트 경로 - textPath 요소
이것은 더 흥미롭고 효과도 훌륭하며 많은 예술적 효과를 만들 수 있습니다. 이 요소는 지정된 경로를 얻습니다. xlink:href 속성에서 텍스트를 이 경로에 정렬합니다. 예를 참조하세요.

코드 복사

코드

이 텍스트는 곡선을 따릅니다.

SVG에서 그림 렌더링 - 이미지 요소
SVG 의 이미지 요소는 래스터 이미지 표시를 직접 지원할 수 있으며 사용이 매우 간단합니다. 아래 예를 보세요.

코드 복사

코드는 다음과 같습니다.

몇 가지 참고 사항:
1. x 또는 y 좌표가 설정되지 않은 경우 기본값은 0입니다.

2. 너비나 높이가 설정되지 않은 경우에도 기본값은 0입니다.

3. 너비 또는 높이가 명시적으로 0으로 설정되면 이 이미지의 렌더링이 금지됩니다.

4. 이미지 형식은 png, jpeg, jpg, svg 등을 지원하므로 svg는 중첩 svg를 지원합니다.

5.image는 다른 요소와 마찬가지로 svg의 일반 요소이므로 모든 자르기, 마스킹, 필터, 회전 및 기타 효과를 지원합니다.

실용 참조:
스크립트 색인: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
개발 센터: https://developer.mozilla.org/en/SVG
인기 참고 자료: http://www.chinasvg.com/
공식 문서: http://www.w3.org/TR/SVG11/