side

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

Thuộc tính side xác định phía của một đường dẫn mà văn bản được đặt lên trên đó (tương đối với hướng của đường dẫn).

Bạn có thể dùng thuộc tính này với phần tử SVG sau:

<textPath>

Ví dụ

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

text {
  font:
    25px "Helvetica",
    "Arial",
    sans-serif;
}

html

<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <text>
    <textPath href="#circle1" side="left">Text left from the path</textPath>
  </text>
  <text>
    <textPath href="#circle2" side="right">Text right from the path</textPath>
  </text>

  <circle
    id="circle1"
    cx="100"
    cy="100"
    r="70"
    fill="transparent"
    stroke="silver" />
  <circle
    id="circle2"
    cx="320"
    cy="100"
    r="70"
    fill="transparent"
    stroke="silver" />
</svg>

Ghi chú sử dụng

Giá trị	`left` \| `right`
Giá trị mặc định	`left`
Có thể animate	Có

left: Giá trị này đặt văn bản ở phía bên trái của đường dẫn (tương đối với hướng của đường dẫn).
right: Giá trị này đặt văn bản ở phía bên phải của đường dẫn (tương đối với hướng của đường dẫn). Điều này thực chất đảo ngược hướng của đường dẫn.

Thông số kỹ thuật

Specification
Scalable Vector Graphics (SVG) 2 # TextPathElementSideAttribute

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

Help improve MDN

Learn how to contribute

This page was last modified on Jan 1, 1970 by MDN contributors.

View this page on GitHub • Report a problem with this content