cy

Cú pháp

/* giá trị độ dài và phần trăm */
cy: 3px;
cy: 20%;

/* Giá trị toàn cục */
cy: inherit;
cy: initial;
cy: revert;
cy: revert-layer;
cy: unset;

Giá trị

Các giá trị <length> và <percentage> biểu thị trung tâm dọc của hình tròn hoặc hình elip.

<length>

Là độ dài tuyệt đối hoặc tương đối, có thể biểu thị bằng bất kỳ đơn vị nào được phép trong kiểu dữ liệu CSS <length>. Các giá trị âm không hợp lệ.

<percentage>

Tỷ lệ phần trăm tham chiếu đến chiều cao của khung nhìn SVG hiện tại.

Định nghĩa hình thức

Cú pháp hình thức

cy = 
  <length-percentage>  

<length-percentage> = 
  <length>      |
  <percentage>  

Ví dụ

Xác định tọa độ trục y của hình tròn và hình elip

Trong ví dụ này, chúng ta có hai phần tử <circle> giống nhau và hai phần tử <ellipse> giống nhau trong một SVG; giá trị thuộc tính cy của chúng lần lượt là 50 và 150.

<svg xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="30" />
  <circle cx="50" cy="50" r="30" />
  <ellipse cx="150" cy="50" rx="20" ry="40" />
  <ellipse cx="150" cy="50" rx="20" ry="40" />
</svg>

Với CSS, chúng ta chỉ tạo kiểu cho hình tròn đầu tiên và hình elip đầu tiên, cho phép các hình đôi của chúng sử dụng kiểu mặc định (với (fill mặc định là màu đen). Chúng ta sử dụng thuộc tính cy để ghi đè giá trị của thuộc tính SVG cy và cũng đặt fill và stroke để phân biệt các hình đầu tiên trong mỗi cặp với các hình đôi của chúng. Trình duyệt hiển thị ảnh SVG với chiều rộng 300px và chiều cao 150px theo mặc định.

svg {
  border: 1px solid;
}

circle:first-of-type {
  cy: 30px;
  fill: lightgreen;
  stroke: black;
}
ellipse:first-of-type {
  cy: 100px;
  fill: pink;
  stroke: black;
}

Trung tâm hình tròn được tạo kiểu cách cạnh trên của khung nhìn SVG 30px và hình elip được tạo kiểu cách cạnh đó 100px, như được xác định trong các giá trị thuộc tính CSS cy. Các trung tâm hình không được tạo kiểu đều cách cạnh trên của khung nhìn SVG 50px, như được xác định trong các giá trị thuộc tính SVG cy của chúng.

Tọa độ trục y dưới dạng giá trị phần trăm

Trong ví dụ này, chúng ta sử dụng cùng markup với ví dụ trước. Sự khác biệt duy nhất là giá trị thuộc tính CSS cy; trong trường hợp này, chúng ta sử dụng giá trị phần trăm 30% và 50%.

<svg xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="30" />
  <circle cx="50" cy="50" r="30" />
  <ellipse cx="150" cy="50" rx="20" ry="40" />
  <ellipse cx="150" cy="50" rx="20" ry="40" />
</svg>

svg {
  border: 1px solid;
}

circle:first-of-type {
  cy: 30%;
  fill: lightgreen;
  stroke: black;
}
ellipse:first-of-type {
  cy: 50%;
  fill: pink;
  stroke: black;
}

Trong trường hợp này, tọa độ trục y của trung tâm hình tròn và hình elip lần lượt là 30% và 50% chiều cao của khung nhìn SVG hiện tại. Vì chiều cao ảnh mặc định là 150px, nghĩa là giá trị cy tương đương với 45px và 120px.

Đặc tả kỹ thuật

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

Xem thêm

• Thuộc tính SVG cy
• Thuộc tính hình học: cy, cx, r, rx, ry, x, y, width, height
• fill
• stroke
• paint-order
• Thuộc tính viết tắt border-radius
• radial-gradient
• Kiểu dữ liệu <basic-shape>