cx

**cx** 属性定义了 SVG **<circle>** 或 **<ellipse>** 元素在 x 轴上的中心点。如果存在，它会覆盖元素的 **cx** 属性。

注意： 尽管 SVG 中的 **cx** 属性与 SVG **<radialGradient>** 元素相关，但 **cx** 属性仅适用于嵌套在 **<svg>** 元素中的 **<circle>** 和 **<ellipse>** 元素。它不适用于 **<radialGradient>** 或其他 SVG 元素，也不适用于 HTML 元素或伪元素。

语法

css
/* 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**。

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，我们仅对第一个圆形和第一个椭圆形进行样式设置，允许它们的对称形状使用默认样式（其中 **fill** 默认值为黑色）。我们使用 **cx** 属性来覆盖 SVG **cx** 属性的值，并为其提供 **fill** 和 **stroke** 以区分每对形状中的第一个形状及其对称形状。浏览器默认情况下将 SVG 图像渲染为 300px 宽和 150px 高。

css
svg {
  border: 1px solid;
}

circle:first-of-type {
  cx: 30px;
  fill: lightgreen;
  stroke: black;
}
ellipse:first-of-type {
  cx: 180px;
  fill: pink;
  stroke: black;
}

结果

样式圆形的中心距 SVG 视窗的左边缘 **30px**，而样式椭圆形距该边缘 **180px**，如 CSS **cx** 属性值中定义的那样。未设置样式的形状中心距 SVG 视窗的左边缘 **50px** 和 **150px**，如它们在 SVG **cx** 属性值中定义的那样。

x 轴坐标作为百分比值

此示例演示了使用百分比值作为 **cx** 的值。

HTML

我们使用与上一个示例相同的标记。

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% 的百分比值。

css
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。

规范

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

浏览器兼容性

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

另请参阅