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 |
瀏覽器相容性
載入中…