<textPath>

Ngữ cảnh sử dụng

Thuộc tính

href

URL tới đường dẫn hoặc hình dạng cơ bản nơi văn bản sẽ được hiển thị. Nếu thuộc tính path được đặt, href sẽ không có tác dụng. Kiểu giá trị: <URL>; Giá trị mặc định: none; Có thể hoạt ảnh: có

lengthAdjust

Điều chỉnh độ dài nên được áp dụng ở đâu cho văn bản: khoảng cách giữa các glyph, hay cả khoảng cách lẫn chính các glyph. Kiểu giá trị: spacing | spacingAndGlyphs; Giá trị mặc định: spacing; Có thể hoạt ảnh: có

method

Phương thức nào được dùng để hiển thị từng glyph dọc theo đường dẫn. Kiểu giá trị: align | stretch; Giá trị mặc định: align; Có thể hoạt ảnh: có

path Experimental

Đường dẫn mà văn bản sẽ được hiển thị trên đó. Kiểu giá trị: <path_data>; Giá trị mặc định: none; Có thể hoạt ảnh: có

side Experimental

Phía nào của đường dẫn sẽ hiển thị văn bản. Kiểu giá trị: left | right; Giá trị mặc định: left; Có thể hoạt ảnh: có

spacing

Cách xử lý khoảng cách giữa các glyph. Kiểu giá trị: auto | exact; Giá trị mặc định: exact; Có thể hoạt ảnh: có

startOffset

Phần đầu của văn bản sẽ được lệch bao xa so với đầu của đường dẫn. Kiểu giá trị: <length> | <percentage> | <number>; Giá trị mặc định: 0; Có thể hoạt ảnh: có

textLength

Chiều rộng của không gian mà văn bản sẽ được hiển thị trong đó. Kiểu giá trị: <length> | <percentage> | <number>; Giá trị mặc định: auto; Có thể hoạt ảnh: có

Giao diện DOM

Phần tử này triển khai giao diện SVGTextPathElement.

Ví dụ

html,
body,
svg {
  height: 100%;
}

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- to hide the path, it is usually wrapped in a <defs> element -->
  <!-- <defs> -->
  <path
    id="MyPath"
    fill="none"
    stroke="red"
    d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50" />
  <!-- </defs> -->

  <text>
    <textPath href="#MyPath">Quick brown fox jumps over the lazy dog.</textPath>
  </text>
</svg>

Đặc tả

Tương thích trình duyệt