cx
cx CSS 属性定义了 SVG <circle> 或 <ellipse> 元素的 x 轴中心点。如果存在，它将覆盖元素的 cx 属性。
注意： 虽然 SVG cx 属性与 SVG <radialGradient> 元素相关，但 cx 属性仅适用于嵌套在 <svg> 中的 <circle> 和 <ellipse> 元素。它不适用于 <radialGradient> 或其他 SVG 元素，也不适用于 HTML 元素或伪元素。
语法
/* length and percentage values */
cx: 20px;
cx: 20%;
/* Global values */
cx: inherit;
cx: initial;
cx: revert;
cx: revert-layer;
cx: unset;
值
<length> 和 <percentage> 值表示圆形或椭圆的水平中心。
<length>-
作为绝对或相对长度，它可以用 CSS
<length>数据类型允许的任何单位表示。负值无效。 <percentage>-
百分比指的是当前 SVG 视口的宽度。
正式定义
正式语法
cx =
<length-percentage>
<length-percentage> =
<length> |
<percentage>
示例
定义圆形和椭圆的 x 轴坐标
此示例演示了 cx 的基本用法，以及 CSS cx 属性如何优先于 cx 属性。
HTML
我们在一个 SVG 中包含两个相同的 <circle> 和两个相同的 <ellipse> 元素；它们的 cx 属性值分别为 50 和 150。
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="30" />
<circle cx="50" cy="50" r="30" />
<ellipse cx="150" cy="50" rx="20" ry="40" />
<ellipse cx="150" cy="50" rx="20" ry="40" />
</svg>
CSS
通过 CSS，我们只设置第一个圆形和第一个椭圆的样式，允许它们的孪生形状使用默认样式（fill 默认为黑色）。我们使用 cx 属性来覆盖 SVG cx 属性的值，并为其提供 fill 和 stroke，以区分每对中的第一个形状与它们的孪生形状。浏览器默认将 SVG 图像渲染为 300px 宽和 150px 高。
svg {
border: 1px solid;
}
circle:first-of-type {
cx: 30px;
fill: lightgreen;
stroke: black;
}
ellipse:first-of-type {
cx: 180px;
fill: pink;
stroke: black;
}
结果
根据 CSS cx 属性值，样式化的圆心距离 SVG 视口左边缘 30px，样式化的椭圆距离该边缘 180px。根据其 SVG cx 属性值，未样式化的形状中心距离 SVG 视口左边缘 50px 和 150px。
x 轴坐标的百分比值
此示例演示了 cx 使用百分比值。
HTML
我们使用与上一个示例相同的标记。
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="30" />
<circle cx="50" cy="50" r="30" />
<ellipse cx="150" cy="50" rx="20" ry="40" />
<ellipse cx="150" cy="50" rx="20" ry="40" />
</svg>
CSS
我们使用与上一个示例类似的 CSS。唯一的区别是 CSS cx 属性值；在这种情况下，我们为 <circle> 使用 30%，为 <ellipse> 使用 80% 的百分比值。
svg {
border: 1px solid;
}
circle:first-of-type {
cx: 30%;
fill: lightgreen;
stroke: black;
}
ellipse:first-of-type {
cx: 80%;
fill: pink;
stroke: black;
}
结果
当 cx 使用百分比值时，这些值是相对于 SVG 视口宽度的。在这里，样式化的圆形和椭圆的中心 x 轴坐标分别是当前 SVG 视口宽度的 30% 和 80%。由于宽度默认为 300px，因此 cx 值距 SVG 视口左边缘分别为 90px 和 240px。
规范
| 规范 |
|---|
| Scalable Vector Graphics (SVG) 2 # CX |
浏览器兼容性
加载中…
另见
- SVG
cx属性 - 几何属性：
cx、cy、r、rx、ry、x、y、width、height fillstrokepaint-orderborder-radius简写属性radial-gradient<basic-shape>数据类型