SVG의 강력한 기능 중 하나는 이미지 나 다른 플러그인에 의지 할 필요없이 표준 HTML 페이지에서 불가능한 레벨로 텍스트를 제어 할 수 있다는 것입니다. 모양이나 경로에서 수행 할 수있는 모든 동작 (예 : 도면 또는 필터링 등)은 텍스트에서 수행 할 수 있습니다. SVG의 텍스트 렌더링은 매우 강력하지만 여전히 한 가지 단점이 있습니다. SVG는 자동 라인 래핑을 수행 할 수 없습니다. 텍스트가 허용되는 공간보다 길면 간단히 잘라내십시오. 대부분의 경우 여러 줄의 텍스트를 작성하려면 여러 텍스트 요소가 필요합니다.
또한 TSPAN 요소를 사용하여 텍스트 요소를 섹션으로 나누어 각 섹션에 고유 한 스타일을 가질 수 있습니다.
또한 텍스트 요소에서 공간의 처리는 HTML과 유사합니다. 라인 브레이크 및 캐리지 리턴은 공간이되고 여러 공간은 단일 공간으로 압축됩니다.
텍스트는 그림 - 텍스트 요소에 직접 표시됩니다 텍스트를 직접 표시하려면 다음과 같이 텍스트 요소를 사용할 수 있습니다.<SVG>
<rect fill = "빨간색" />
<circle cx = "150"cy = "100"r = "80"fill = "green" />
<text x = "150"y = "125"font-size = "60"text-anchor = "middle"fill = "White"> svg </text>
</svg>
위의 예에서 볼 수 있듯이 텍스트 요소는 다음 속성을 설정할 수 있습니다.
x, y는 텍스트 위치 좌표입니다. 텍스트 랜치는 텍스트 디스플레이의 방향으로, 실제로 텍스트 위치의 위치 (x, y)입니다. 이 속성에는 시작, 중간 및 끝의 세 가지 값이 있습니다. 시작은 텍스트 위치 좌표 (x, y)가 텍스트의 시작 부분에 있고 텍스트 가이 시점부터 시작하는 오른쪽으로 하나씩 하나씩 표시됨을 의미합니다. 중간 평균 (x, y)은 텍스트의 중간에 있으며 텍스트는 왼쪽과 오른쪽 방향으로 표시되며 실제로 중앙에 있습니다. 끝은 (x, y) 포인트가 텍스트의 끝에 있고 텍스트가 왼쪽에 하나씩 표시됩니다.이러한 특성 외에도 다음 속성은 CSS 또는 속성에 직접 지정할 수 있습니다.
채우기, 스트로크 : 채우기 및 스트로크 색상, 특정 용도는 나중에 요약됩니다. 글꼴의 관련 속성 : 글꼴-가족, 글꼴 스타일, 글꼴 체중, 글꼴-변수, 글꼴 스트레치, 글꼴 크기, 글꼴 크기 조정, 커닝, 글자 스페이스, 단어 스케이싱 및 텍스트 설명. 텍스트 간격 - tspan 요소 이 요소는 텍스트 요소를 강력하게 보완합니다. 간격 내에서 텍스트를 렌더링하는 데 사용됩니다. TSPAN 요소의 텍스트 요소 또는 자식 요소에만 나타날 수 있습니다. 일반적인 사용법은 텍스트의 일부를 표시하는 것을 강조하는 것입니다. 예를 들어:<Text>
<tspan font-weight = "bold"fill = "red"> 이것은 대담하고 빨간색입니다
</text>
TSPAN 요소는 설정할 수있는 다음 속성을 가지고 있습니다. X, Y는 포함 된 텍스트의 절대 좌표 값을 설정하는 데 사용되며, 이는 기본 텍스트 위치를 무시합니다. 이러한 특성에는 각각의 해당 단일 문자에 적용되는 일련의 숫자가 포함될 수 있습니다. 해당 설정이없는 문자는 이전 문자를 따릅니다. 예를 들어:
<텍스트 x = "10"y = "10"> 안녕하세요 세계!
<tspan x = "100 200 300"font-weight = "bold"fill = "red"> 이것은 대담하고 빨간색 </tspan>입니다.
</text>
DX, DY는 기본 텍스트 위치에 대한 포함 된 텍스트의 오프셋을 설정하는 데 사용됩니다. 이 속성에는 각각 해당 문자에 적용되는 일련의 숫자가 포함될 수 있습니다. 해당 설정이없는 문자는 이전 문자를 따릅니다. 위의 예에서 DX로 X를 변경하여 효과를 확인할 수 있습니다. 회전은 글꼴의 회전 각도를 설정하는 데 사용됩니다. 이 속성 페이지에는 각 문자에 적용되는 일련의 숫자가 포함될 수 있습니다. 해당 설정이없는 문자는 마지막 번호 세트를 사용합니다.
<텍스트 x = "10"y = "10"> 안녕하세요 세계!
<tspan rotate = "10 20 45"font-weight = "bold"fill = "red"> 이것은 대담하고 빨간색 </tspan>입니다.
</text>
TextLength : 이것은 가장 수수께끼의 속성입니다. 렌더링이 텍스트의 길이 가이 값과 일치하지 않음을 발견하면이 길이가 기초가 될 것이라고합니다. 그러나 나는 그것을 시도하지 않았다. 텍스트 따옴표 - 트레프 요소
이 요소를 사용하면 정의 된 텍스트를 참조하고 일반적으로 xlink : href 지정된 대상 요소를 사용하여 현재 위치로 효율적으로 복사 할 수 있습니다. CSS를 사용하여 현재 텍스트를 수정할 때 복사되었으므로 원본 텍스트는 수정되지 않습니다. See example:
<text id = "example"> 이것은 예제 텍스트입니다. </text>
<Text>
<tref xlink : href = "#example" />
</text>
텍스트 경로 - 텍스트 경로 요소 이것은 더 흥미롭고 효과도 시원하며 많은 예술적 효과를 만들 수 있습니다. 이 요소는 xlink : href 속성에서 지정된 경로를 가져 와서이 경로에서 텍스트를 정렬합니다. 예를 참조하십시오.<path id = "my_path"d = "m 20,20 c 40,40 80,40 100,20" />
<Text>
<TextPath Xlink : href = "#my_path">이 텍스트는 곡선을 따릅니다. </textpath>
</text>
SVG에서 이미지 렌더링 - 이미지 요소 SVG의 이미지 요소는 래스터 이미지 표시를 직접 지원할 수 있으며 사용하기가 매우 쉽습니다. 다음 예를 참조하십시오.<SVG>
<image xlink : href = "penguins.jpg"x = "0"y = "0"/>
</svg>
여기에 주목해야 할 몇 가지 요점이 있습니다 .1. x 또는 y 좌표가 설정되지 않으면 기본값은 0입니다.
2. 너비 또는 높이가 설정되지 않으면 기본값은 0입니다.
3. 너비 또는 높이가 0으로 명시 적으로 설정되면이 이미지의 렌더링은 금지됩니다.
4. 이미지 형식은 PNG, JPEG, JPG, SVG 등을 지원하므로 SVG는 중첩 된 SVG를 지원합니다.
5. 이미지는 다른 요소와 마찬가지로 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/