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>資料型別