svg 태그: <text> 태그와 <tspan> 태그 적용(코드)-H5 튜토리얼-php.cn

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

不言

풀어 주다： 2018-08-06 14:21:56

원래의

3043명이 탐색했습니다.

이 글에서 공유한 내용은 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 속성에 의해 결정될 수 있습니다.