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

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

text 속성

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

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <text x="100" y="100" dy="100" fill="black" style="font-size:40px;">
          <tspan fill="blue" dy="-20 10">我是</tspan><tspan fill="red">中国人</tspan>
     </text>
     <path d="M100,0 V200 M0,100 H200" stroke="red"/>
</svg>

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

가로 정렬

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

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <text x="200" y="50" text-anchor="start" fill="black" style="font-size:40px;">我是中国人</text>
     <text x="200" y="100" text-anchor="middle"  fill="black" style="font-size:40px;">我是中国人</text>
     <text x="200" y="150" text-anchor="end" fill="black" style="font-size:40px;">我是中国人</text>
     <path d="M200,0 V200 M0,100 H400" stroke="red"/>
</svg>

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

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <path id="p1" d="M100,200 Q200 100 300 200 T 500 200" stroke="green" fill="none"/>
     <text style="font-size:20px;">
          <textPath xlink:href="#p1">我是根据固定曲线来绘制的文字方向</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 중국어 웹사이트의 기타 관련 기사를 참조하세요!