x

x CSS 属性定义 SVG <rect> 形状、<image> 图像、<foreignObject> 视口或嵌套的 <svg> 视口左上角在最近的 <svg> 父级用户 坐标系 中的 x 轴坐标。如果存在，则会覆盖元素的 x 属性。

注意：x 属性仅适用于 <rect>、<image>、<foreignObject> 和嵌套在 <svg> 中的 <svg> 元素。它对最外层的 <svg> 元素本身没有任何影响，也不适用于其他 SVG 元素或 HTML 元素或伪元素。

语法

css
/* length and percentage values */
x: 40px;
x: 40%;

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

值

<length> 和 <percentage> 值表示 SVG 元素容器左上角的 x 轴坐标位置。

<length>

作为绝对或相对长度，它可以用 CSS <length> 数据类型允许的任何单位表示。

<percentage>

百分比指的是 SVG viewBox 的宽度（如果已声明），否则，百分比指的是当前 SVG 视口的宽度。

正式定义

数据库中未找到该值！

正式语法

x = 
  <length-percentage>  

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

示例

定义 SVG 形状的 x 轴坐标

此示例演示了 x 的基本用例，以及 CSS x 属性如何优先于 x 属性。

HTML

我们包含四个相同的 SVG <rect> 元素；它们的 x 和 y 属性值均为 10，这意味着四个矩形都位于相同的位置，即距 SVG 视口左上角 10px 的位置。

html
<svg xmlns="http://www.w3.org/2000/svg">
  <rect width="100" height="100" x="10" y="10" />
  <rect width="100" height="100" x="10" y="10" />
  <rect width="100" height="100" x="10" y="10" />
  <rect width="100" height="100" x="10" y="10" />
</svg>

CSS

我们设置所有矩形的样式，使其具有黑色边框并略微透明，以便可见重叠的矩形。我们为每个矩形提供不同的填充和 x 值。

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

rect {
  fill: none;
  stroke: black;
  opacity: 0.8;
}

rect:nth-of-type(2) {
  x: 3em;
  fill: red;
}

rect:nth-of-type(3) {
  x: 180px;
  fill: yellow;
}

rect:nth-of-type(4) {
  x: 50%;
  fill: orange;
}

结果

矩形的左边缘分别位于 10（来自属性）、3em、180px 和 50%。SVG 的宽度为 300px，因此最后一个矩形的左侧位于 150px 标记处。

规范

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

浏览器兼容性

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

另请参阅