r
语法
/* 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 视口归一化对角线，计算方法为.
正式定义
正式语法
r =
<length-percentage>
<length-percentage> =
<length> |
<percentage>
示例
定义圆的半径
在此示例中，SVG 中有两个相同的 <circle> 元素，每个元素的半径均为 10，并且其圆心的 x 轴和 y 轴坐标也相同。
<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 高。
svg {
border: 1px solid black;
}
circle:first-of-type {
r: 30px;
fill: lightgreen;
stroke: black;
}
ViewBox 与视口像素
此示例包含两个 SVG，每个 SVG 中都有两个 <circle> 元素。第二个 SVG 包含一个 viewBox 属性，以演示 SVG viewBox 和 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 与上一个示例类似，设置了 r: 30px，但我们设置了 width 以确保两个图像的宽度都是 300px。
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 的值；在这里，我们使用一个百分比值。
svg {
border: 1px solid black;
width: 300px;
}
circle:first-of-type {
r: 30%;
fill: lightgreen;
stroke: black;
}
在这两种情况下，圆的半径都是 SVG 视口归一化对角线的 30%。半径 r 等于。虽然第一个图像使用的是 300 和 150 CSS 像素，第二个使用的是 200 和 100 SVG viewBox 单位，但 30% 是一个比例值。因此，r 的值是相同的：47.43 viewBox 单位，解析为 71.15 CSS 像素。
虽然 r 是相同的，但圆心点不同，因为第二个 SVG 被放大了 50%，导致其圆心向右下方移动了 50%。
规范
| 规范 |
|---|
| Scalable Vector Graphics (SVG) 2 # R |
浏览器兼容性
加载中…
另见
- 几何属性：
r、cx、cy、rx、ry、x、y、width、height fillstrokepaint-orderborder-radius简写属性radial-gradient<basic-shape>数据类型- SVG
r属性