x
x CSS 属性定义了 SVG <rect> 形状、<image> 图像、<foreignObject> 视口或嵌套的 <svg> 视口左上角的 x 轴坐标，其坐标是相对于最近的 <svg> 祖先的用户坐标系而言的。如果存在，它会覆盖元素的 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 处。
规范
| 规范 |
|---|
| Scalable Vector Graphics (SVG) 2 # X |
浏览器兼容性
加载中…