svg 태그: 태그와 태그 적용(코드)

이 글에서 공유한 내용은 svg 태그의 적용(코드)에 관한 것입니다: 태그가 필요한 친구들이 참고할 수 있기를 바랍니다. 당신에게 도움이 됩니다.

text 속성

x: 텍스트 그리기의 x축 위치
y: 텍스트 그리기의 y축 위치
dx: 이전 문자를 기준으로 각 문자의 오프셋 거리
dy: 각 문자의 상대적 위치 이전 문자까지 오프셋 거리

<svg>
     <text>
          <tspan>我是</tspan><tspan>中国人</tspan>
     </text>
     <path></path>
</svg>

텍스트를 가로 및 세로로 가운데 정렬

가로 정렬

text-anchor 속성은 세 가지 값으로 텍스트를 가로로 정렬하도록 설정할 수 있습니다. start | middle |

<svg>
     <text>我是中国人</text>
     <text>我是中国人</text>
     <text>我是中国人</text>
     <path></path>
</svg>

태그를 사용하면 텍스트를 지정된 경로에 정렬할 수 있습니다.

<svg>
     <path></path>
     <text>
          <textpath>我是根据固定曲线来绘制的文字方向</textpath>
     </text>
</svg>

브라우저는 경로 너머의 부분을 렌더링하지 않습니다.

경로의 텍스트 오프셋은 위치 지정 속성 x, y, dx, dy, text-anchor 및 startOffset 속성에 의해 결정될 수 있습니다.

1. x/dx/startOffset은 경로에서 문자 렌더링의 시작점을 설정할 수 있습니다.

2. y 속성 설정은 효과가 없습니다.

3. dy는 일반 줄의 문자 오프셋을 설정할 수 있습니다.

4. text-anchor는 텍스트의 가로 정렬 효과를 설정하는 것입니다.

추천 관련 기사:

svg에서 좌표계 변환을 구현하는 방법(코드 포함)

svg의 요소 사용 소개 및 마커 속성 소개

위 내용은 svg 태그: 태그와 태그 적용(코드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!