ry

Cú pháp

/* Giá trị khởi tạo */
ry: auto;

/* Giá trị độ dài và phần trăm */
ry: 30px;
ry: 30%;

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

Giá trị

Giá trị <length>, <percentage>, hoặc từ khóa auto biểu thị bán kính dọc của hình ellipse và bán kính viền dọc của hình chữ nhật.

<length>

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

<percentage>

Giá trị phần trăm tham chiếu đến chiều cao của khung nhìn SVG hiện tại. Giá trị được dùng cho <rect> không bao giờ vượt quá 50% chiều cao của hình chữ nhật.

auto

Khi được đặt hoặc mặc định là auto, giá trị ry bằng với giá trị độ dài tuyệt đối được dùng cho rx. Nếu cả ry và rx đều có giá trị tính toán là auto, giá trị được dùng là 0.

Định nghĩa chính thức

Cú pháp chính thức

ry = 
  <length-percentage>  |
  auto                 

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

Ví dụ

Tạo góc bo tròn

Ví dụ này minh họa việc tạo hình chữ nhật có góc bo tròn bằng cách áp dụng thuộc tính ry cho các phần tử <rect> trong SVG.

HTML

Chúng ta bao gồm một hình ảnh SVG với bốn phần tử <rect>; tất cả các hình chữ nhật đều giống nhau ngoại trừ giá trị thuộc tính x, xác định vị trí của chúng dọc theo trục x.

<svg xmlns="http://www.w3.org/2000/svg">
  <rect width="50" height="120" y="5" x="5" />
  <rect width="50" height="120" y="5" x="60" />
  <rect width="50" height="120" y="5" x="115" />
  <rect width="50" height="120" y="5" x="170" />
  <rect width="50" height="120" y="5" x="225" />
</svg>

CSS

Với CSS, chúng ta đặt giá trị ry cho bốn hình chữ nhật:

svg {
  border: 1px solid;
}

rect:nth-of-type(2) {
  ry: 10px;
  fill: red;
}

rect:nth-of-type(3) {
  ry: 2em;
  fill: blue;
}

rect:nth-of-type(4) {
  ry: 5%;
  fill: orange;
}

rect:nth-of-type(5) {
  ry: 80%;
  fill: green;
}

Kết quả

Hình chữ nhật đầu tiên mặc định là auto; vì tất cả các giá trị rx trong ví dụ này cũng mặc định là auto, giá trị được dùng của ry là 0. Hình chữ nhật đỏ và xanh lam có góc bo tròn lần lượt là 10px và 2em. Vì khung nhìn SVG mặc định là 300px x 150px, giá trị 5% của hình chữ nhật cam tạo ra bán kính 7.5px. Hình chữ nhật xanh lá có ry: 80%. Tuy nhiên, vì giá trị của ry không bao giờ vượt quá 50% chiều cao của hình chữ nhật, hiệu ứng tương đương như khi đặt ry: 50%; rx: 50%.

Xác định bán kính dọc của hình ellipse

Ví dụ <ellipse> cơ bản này minh họa thuộc tính CSS ry được ưu tiên hơn thuộc tính SVG ry khi xác định bán kính dọc của hình.

HTML

Chúng ta bao gồm hai phần tử <ellipse> giống hệt nhau trong SVG; mỗi phần tử có thuộc tính ry được đặt là 20.

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

CSS

Chúng ta chỉ tạo kiểu cho hình ellipse đầu tiên, để phần còn lại sử dụng kiểu mặc định của user agent (với fill mặc định là màu đen). Thuộc tính hình học ry ghi đè giá trị của thuộc tính SVG ry. Chúng ta cũng đặt các thuộc tính fill và stroke để phân biệt hình được tạo kiểu với phần còn lại.

svg {
  border: 1px solid;
}

ellipse:first-of-type {
  ry: 80px;
  fill: magenta;
  stroke: rebeccapurple;
}

Kết quả

Bán kính dọc của hình ellipse được tạo kiểu là 80px, như được xác định trong giá trị thuộc tính CSS ry. Bán kính dọc của hình ellipse không được tạo kiểu là 20px, được xác định bởi thuộc tính ry.

Giá trị phần trăm bán kính dọc của hình ellipse

Ví dụ này minh họa việc sử dụng giá trị phần trăm cho ry.

HTML

Chúng ta sử dụng cùng markup như ví dụ trước.

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

CSS

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

svg {
  border: 1px solid;
}

ellipse:first-of-type {
  ry: 30%;
  fill: magenta;
  stroke: rebeccapurple;
}

Kết quả

Khi sử dụng giá trị phần trăm cho ry, các giá trị tương đối với chiều cao của khung nhìn SVG. Ở đây, kích thước bán kính dọc của hình ellipse được tạo kiểu là 30% chiều cao của khung nhìn SVG hiện tại. Vì chiều cao mặc định là 150px, giá trị ry là 45px, khiến hình ellipse cao 90px.

Đặc tả kỹ thuật

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

Xem thêm

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