rx

Cú pháp

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

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

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

Giá trị

Giá trị <length>, <percentage>, hoặc từ khóa auto biểu thị bán kính ngang của hình ellipse và bán kính viền ngang 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 rộng 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 rộng của hình chữ nhật.

auto

Khi được đặt hoặc mặc định là auto, giá trị rx bằng với giá trị độ dài tuyệt đối được dùng cho ry. Nếu cả rx và ry đề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

rx = 
  <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 rx 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ị rx cho bốn hình chữ nhật:

svg {
  border: 1px solid;
}

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

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

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

rect:nth-of-type(5) {
  rx: 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ị ry trong ví dụ này cũng mặc định là auto, giá trị được dùng của rx 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 15px. Hình chữ nhật xanh lá có rx: 80%. Tuy nhiên, vì giá trị của rx không bao giờ vượt quá 50% chiều rộng của hình chữ nhật, hiệu ứng tương đương như khi đặt rx: 50%; ry: 50%.

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

Ví dụ <ellipse> cơ bản này minh họa thuộc tính CSS rx được ưu tiên hơn thuộc tính SVG rx khi xác định bán kính ngang 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 rx được đặt là 20.

<svg xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="80" cy="50" rx="20" ry="40" />
  <ellipse cx="80" cy="50" rx="20" ry="40" />
</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 rx ghi đè giá trị của thuộc tính SVG rx. 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 {
  rx: 80px;
  fill: magenta;
  stroke: rebeccapurple;
}

Kết quả

Bán kính ngang 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 rx. Bán kính ngang của hình ellipse không được tạo kiểu là 20px, được xác định bởi thuộc tính rx.

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

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

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="20" ry="40" />
  <ellipse cx="80" cy="50" rx="20" ry="40" />
</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 rx; 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 {
  rx: 30%;
  fill: magenta;
  stroke: rebeccapurple;
}

Kết quả

Khi sử dụng giá trị phần trăm cho rx, các giá trị tương đối với chiều rộng của khung nhìn SVG. Ở đây, kích thước bán kính ngang của hình ellipse được tạo kiểu là 30% chiều rộng của khung nhìn SVG hiện tại. Vì chiều rộng mặc định là 300px, giá trị rx là 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: rx, cx, cy, r, 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>
• Thuộc tính SVG rx