r

r CSS 属性定义圆形的半径。它只能与 SVG <circle> 元素一起使用。如果存在，它会覆盖圆形的 r 属性。

注意：r 属性仅适用于嵌套在 <svg> 中的 <circle> 元素。它不适用于其他 SVG 元素或 HTML 元素或伪元素。

语法

css
/* Length and percentage values */
r: 3px;
r: 20%;

/* Global values */
r: inherit;
r: initial;
r: revert;
r: revert-layer;
r: unset;

值

<length> 和 <percentage> 值定义圆形的半径。

<length>

绝对或相对长度可以用 CSS <length> 数据类型允许的任何单位表示。负值无效。

<percentage>

百分比指的是当前 SVG 视口的标准化对角线，计算公式为 <width> 2 + <height> 2 2 .

正式定义

数据库中未找到值！

正式语法

r = 
  <length-percentage>  

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

示例

定义圆形的半径

在这个例子中，我们在 SVG 中有两个相同的 <circle> 元素，每个元素都有一个 10 半径，并且它们的中心点的 x 轴和 y 轴坐标相同。

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

使用 CSS，我们只设置第一个圆形的样式，允许第二个圆形使用默认样式（其中 (fill 默认值为黑色）。我们使用 r 属性来覆盖 SVG r 属性的值，并为其提供 fill 和 stroke。SVG 的默认大小为 300px 宽和 150px 高。

css
svg {
  border: 1px solid black;
}

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

视区与视口像素

此示例包含两个 SVG，每个 SVG 都包含两个 <circle> 元素。第二个 SVG 包含一个 viewBox 属性，以演示 SVG 视区和 SVG 视口之间的区别。

html
<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 与前面的示例类似，设置了 r: 30px，但我们设置了 width 以确保图像都为 300px 宽

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

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

因为 viewBox 属性将 SVG 定义为 200 SVG 坐标系像素宽，并且图像被放大到 300px，所以 30 SVG 坐标像素被缩放以呈现为 45 CSS 像素。

使用百分比定义圆形的半径

在这个例子中，我们使用与前一个例子相同的标记。唯一的区别是 r 值；在这种情况下，我们使用百分比值。

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

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

在这两种情况下，圆形半径都是 SVG 视口标准化对角线的 30%。半径 r 等于 0.3 × <width> 2 + <height> 2 2 。虽然第一个图像使用 300 和 150 CSS 像素，而第二个图像使用 200 和 100 SVG 视区单位，但 30% 是一个比例值。因此，r 值相同：47.43 视区单位，解析为 71.15 CSS 像素。

虽然 r 相同，但中心点不同，因为第二个 SVG 放大了 50%，将其中心向下和向右移动了 50%。

规范

规范
可缩放矢量图形 (SVG) 2
# R

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅