r

Cú pháp

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

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

Giá trị

Các giá trị <length> và <percentage> xác định bán kính của hình tròn.

<length>

Các độ 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 bởi kiểu dữ liệu CSS <length>. Giá trị âm không hợp lệ.

<percentage>

Phần trăm tham chiếu đến đường chéo chuẩn hóa của viewport SVG hiện tại, được tính là $\frac{\sqrt{{\mathrm{<width>}}^2+{\mathrm{<height>}}^2}}{\sqrt{2}}$.

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

Cú pháp hình thức

r = 
  <length-percentage>  

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

Ví dụ

Xác định bán kính của hình tròn

Trong ví dụ này, chúng ta có hai phần tử <circle> giống hệt nhau trong SVG, mỗi phần tử có bán kính 10 và tọa độ trục x và y giống nhau cho điểm tâm của chúng.

<svg xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="10" />
  <circle cx="50" cy="50" r="10" />
</svg>

Với CSS, chúng ta chỉ tạo kiểu cho hình tròn đầu tiên, cho phép hình tròn thứ hai sử dụng kiểu dáng mặc định (với fill mặc định là đen). Chúng ta dùng thuộc tính r để ghi đè giá trị thuộc tính SVG r, đặt fill và stroke. Kích thước mặc định của SVG là 300px chiều rộng và 150px chiều cao.

svg {
  border: 1px solid black;
}

circle:first-of-type {
  r: 30px;
  fill: lightgreen;
  stroke: black;
}

ViewBox so với điểm ảnh viewport

Ví dụ này chứa hai SVG, mỗi SVG có hai phần tử <circle>. SVG thứ hai bao gồm thuộc tính viewBox để minh họa sự khác biệt giữa SVG viewBox và viewport SVG.

<svg xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="10" />
  <circle cx="50" cy="50" r="10" />
</svg>
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="10" />
  <circle cx="50" cy="50" r="10" />
</svg>

CSS tương tự như ví dụ trước, với r: 30px được đặt, nhưng chúng ta đặt width để đảm bảo cả hai hình ảnh đều rộng 300px:

svg {
  border: 1px solid black;
  width: 300px;
}

circle:first-of-type {
  r: 30px;
  fill: lightgreen;
  stroke: black;
}

Vì thuộc tính viewBox xác định SVG là 200 điểm ảnh hệ tọa độ SVG chiều rộng, và hình ảnh được phóng to lên 300px, 30 điểm ảnh tọa độ SVG được thu phóng để kết xuất thành 45 điểm ảnh CSS.

Xác định bán kính hình tròn bằng phần trăm

Trong ví dụ này, chúng ta sử dụng cùng đánh dấu như ví dụ trước. Sự khác biệt duy nhất là giá trị r; trong trường hợp này, chúng ta sử dụng giá trị phần trăm.

<svg xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="10" />
  <circle cx="50" cy="50" r="10" />
</svg>
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="10" />
  <circle cx="50" cy="50" r="10" />
</svg>

svg {
  border: 1px solid black;
  width: 300px;
}

circle:first-of-type {
  r: 30%;
  fill: lightgreen;
  stroke: black;
}

Trong cả hai trường hợp, bán kính hình tròn là 30% của đường chéo chuẩn hóa của viewport SVG. Bán kính r bằng $0.3\times \frac{\sqrt{{\mathrm{<width>}}^2+{\mathrm{<height>}}^2}}{\sqrt{2}}$. Trong khi hình ảnh đầu tiên sử dụng 300 và 150 điểm ảnh CSS còn hình ảnh thứ hai sử dụng 200 và 100 đơn vị viewbox SVG, 30% là giá trị tỷ lệ. Do đó, giá trị r giống nhau: 47.43 đơn vị viewBox, giải quyết thành 71.15 điểm ảnh CSS.

Trong khi r giống nhau, các điểm tâm khác nhau vì SVG thứ hai được phóng to 50%, đẩy tâm của nó xuống và sang phải 50%.

Thông số kỹ thuật

Khả năng tương thích trình duyệt

Xem thêm

• Các thuộc tính hình học: r, cx, cy, 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>
• Thuộc tính SVG r