New css property: SVG cx and cy attributes

files/en-us/web/css/cx/index.md

@@ -0,0 +1,157 @@
+---
+title: cx
+slug: Web/CSS/cx
+page-type: css-property
+browser-compat: css.properties.cx
+---
+
+{{CSSRef}}
+
+The **`cx`** [CSS](/en-US/docs/Web/CSS) property defines the x-axis center point of an SVG {{SVGElement("circle")}} or {{SVGElement("ellipse")}} element. If present, it overrides the element's {{SVGAttr("cx")}} attribute.
+
+> [!NOTE]
+> While SVG the {{SVGAttr("cx")}} attribute is relevant to the SVG {{SVGElement("radialGradient")}} element, the `cx` property only applies to {{SVGElement("circle")}} and {{SVGElement("ellipse")}} elements nested in an {{SVGElement("svg")}}. It doesn't apply to `<radialGradient>` or other SVG elements nor to HTML elements or pseudo-elements.
+
+## Syntax
+
+```css
+/* length and percentage values */
+cx: 20px;
+cx: 20%;
+
+/* Global values */
+cx: inherit;
+cx: initial;
+cx: revert;
+cx: revert-layer;
+cx: unset;
+```
+
+### Values
+
+The {{cssxref("length")}} and {{cssxref("percentage")}} values denote the horizontal center of the circle or ellipse.
+
+- {{cssxref("length")}}
+
+  - : As an absolute or relative length, it can be expressed in any unit allowed by the CSS {{cssxref("&lt;length&gt;")}} data type. Negative values are invalid.
+
+- {{cssxref("percentage")}}
+
+  - : Percentages refer to the width of the current SVG viewport.
+
+## Formal definition
+
+{{CSSInfo}}
+
+## Formal syntax
+
+{{csssyntax}}
+
+## Examples
+
+### Defining the x-axis coordinate of a circle and ellipse
+
+This example demonstrates the basic use case of `cx`, and how the CSS `cx` property takes precedence over the `cx` attribute.
+
+#### HTML
+
+We include two identical `<circle>` and two identical `<ellipse>` elements in an SVG; their `cx` attribute values are `50` and `150`, respectively.
+
+```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
+
+With CSS, we style only the first circle and first ellipse, allowing their twin shapes to use default styles (with ({{cssxref("fill")}} defaulting to black). We use the `cx` property to override the value of the SVG {{SVGAttr("cx")}} attribute and also give it a `fill` and {{cssxref("stroke")}} to differentiate the first shapes in each pair from their twin. The browser renders SVG images as `300px` wide and `150px` tall by default.
+
+```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;
+}
+```
+
+#### Results
+
+{{EmbedLiveSample("Defining the x-axis coordinate of a circle and ellipse", "300", "180")}}
+
+The style circle's center is `30px` from the left edge of the SVG viewport and the styled ellipse is `180px` from that edge, as defined in the CSS `cx` property values. The unstyled shapes centers are `50px` and `150px` from the left edge of the SVG viewport, as defined in their SVG `cx` attribute values.
+
+### x-axis coordinates as percentage values
+
+This example demonstrates using percentage values for `cx`.
+
+#### HTML
+
+We use the same markup as the previous example.
+
+```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
+
+We use CSS which is similar to the previous example. The only difference is the CSS `cx` property value; in this case, we use percentage values of `30%` for the `<circle>` and `80%` for the `<ellipse>`.
+
+```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;
+}
+```
+
+#### Results
+
+{{EmbedLiveSample("x-axis coordinates as percentage values", "300", "180")}}
+
+When using percentage values for `cx`, the values are relative to the width of the SVG viewport. Here, the x-axis coordinates of the center of the style circle and ellipse are `30%` and `80%`, respectively, of the width of the current SVG viewport. As the width defaulted to `300px`, the `cx` values are `90px` and `240px` from the SVG viewport's left edge.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- SVG {{SVGAttr("cx")}} attribute
+- Geometry properties: `cx`, {{cssxref("cy")}}, {{cssxref("r")}}, {{cssxref("rx")}}, {{cssxref("ry")}}, {{cssxref("x")}}, {{cssxref("y")}}, {{cssxref("width")}}, {{cssxref("height")}}
+- {{cssxref("fill")}}
+- {{cssxref("stroke")}}
+- {{cssxref("paint-order")}}
+- {{cssxref("border-radius")}} shorthand property
+- {{cssxref("radial-gradient")}}
+- {{cssxref("basic-shape")}} data type

files/en-us/web/css/cy/index.md

@@ -0,0 +1,139 @@
+---
+title: cy
+slug: Web/CSS/cy
+page-type: css-property
+browser-compat: css.properties.cy
+---
+
+{{CSSRef}}
+
+The **`cy`** [CSS](/en-US/docs/Web/CSS) property defines the y-axis center point of an SVG {{SVGElement("circle")}} or {{SVGElement("ellipse")}} elements. If present, it overrides the element's {{SVGAttr("cy")}} attribute.
+
+> [!NOTE]
+> While the SVG {{SVGElement("radialGradient")}} element supports the {{SVGAttr("cy")}} attribute, the `cy` property only applies to {{SVGElement("circle")}} and {{SVGElement("ellipse")}} elements nested in an {{SVGElement("svg")}}. This attribute does not apply to `<radialGradient>` or other SVG elements nor to HTML elements or pseudo-elements.
+
+## Syntax
+
+```css
+/* length and percentage values */
+cy: 3px;
+cy: 20%;
+
+/* Global values */
+cy: inherit;
+cy: initial;
+cy: revert;
+cy: revert-layer;
+cy: unset;
+```
+
+### Values
+
+The {{cssxref("length")}} and {{cssxref("percentage")}} values denote the vertical center of the circle or ellipse.
+
+- {{cssxref("length")}}
+
+  - : As an absolute or relative length, it can be expressed in any unit allowed by the CSS {{cssxref("&lt;length&gt;")}} data type. Negative values are invalid.
+
+- {{cssxref("percentage")}}
+
+  - : Percentages refer to the height of the current SVG viewport.
+
+## Formal definition
+
+{{CSSInfo}}
+
+## Formal syntax
+
+{{csssyntax}}
+
+## Examples
+
+### Defining the y-axis coordinate of a circle and ellipse
+
+In this example, we have two identical `<circle>` and two identical `<ellipse>` elements in an SVG; their `cy` attribute values ar `50` and `150`, respectively.
+
+```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>
+```
+
+With CSS, we style only the first circle and first ellipse, allowing their twin shapes to use default styles (with ({{cssxref("fill")}} defaulting to black). We use the `cy` property to override the value of the SVG {{SVGAttr("cy")}} attribute and also give it a `fill` and {{cssxref("stroke")}} to differentiate the first shapes in each pair from their twin. The browser renders SVG images as `300px` wide and `150px` tall by default.
+
+```css
+svg {
+  border: 1px solid;
+}
+
+circle:first-of-type {
+  cy: 30px;
+  fill: lightgreen;
+  stroke: black;
+}
+ellipse:first-of-type {
+  cy: 100px;
+  fill: pink;
+  stroke: black;
+}
+```
+
+{{EmbedLiveSample("Defining the y-axis coordinate of a circle and ellipse", "300", "180")}}
+
+The styled circle's center is `30px` from the top edge of the SVG viewport and the styled ellipse is `100px` from that edge, as defined in the CSS `cy` property values. The unstyled shapes centers are both `50px` from the top edge of the SVG viewport, as defined in their SVG `cy` attribute values.
+
+### y-axis coordinates as percentage values
+
+In this example, we use the same markup as the previous example. The only difference is the CSS `cy` property value; in this case, we use percentage values of `30%` and `50%`.
+
+```html hidden
+<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
+svg {
+  border: 1px solid;
+}
+
+circle:first-of-type {
+  cy: 30%;
+  fill: lightgreen;
+  stroke: black;
+}
+ellipse:first-of-type {
+  cy: 50%;
+  fill: pink;
+  stroke: black;
+}
+```
+
+{{EmbedLiveSample("y-axis coordinates as percentage values", "300", "180")}}
+
+In this case, the y-axis coordinates of the center of the circle and ellipse are `30%` and `50%` of the height of the current SVG viewport, respectively. As the image's height defaulted to `150px`, meaning the `cy` value is the equivalent of `45px` and `120px`.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- SVG {{SVGAttr("cy")}} attribute
+- Geometry properties: `cy`, {{cssxref("cx")}}, {{cssxref("r")}}, {{cssxref("rx")}}, {{cssxref("ry")}}, {{cssxref("x")}}, {{cssxref("y")}}, {{cssxref("width")}}, {{cssxref("height")}}
+- {{cssxref("fill")}}
+- {{cssxref("stroke")}}
+- {{cssxref("paint-order")}}
+- {{cssxref("border-radius")}} shorthand property
+- {{cssxref("radial-gradient")}}
+- {{cssxref("basic-shape")}} data type

files/en-us/web/svg/attribute/cx/index.md

@@ -9,14 +9,16 @@ spec-urls:
 
 {{SVGRef}}
 
-The **`cx`** attribute define the x-axis coordinate of a center point.
+The **`cx`** attribute defines the x-axis coordinate of a center point.
 
 You can use this attribute with the following SVG elements:
 
 - {{SVGElement("circle")}}
 - {{SVGElement("ellipse")}}
 - {{SVGElement("radialGradient")}}
 
+> **Note:** As a _geometry property_, {{cssxref("cx")}} can also be used as CSS property for `<circle>` and `<ellipse>`.
+
 ## Example
 
 ```css hidden
@@ -177,3 +179,6 @@ svg {
 
 - {{SVGAttr("cy")}}
 - {{SVGAttr("r")}}
+- {{SVGAttr("rx")}}
+- {{SVGAttr("ry")}}
+- Geometry properties: {{cssxref("cx")}}, {{cssxref("cy")}}, {{cssxref("r")}}, {{cssxref("rx")}}, {{cssxref("ry")}}, {{cssxref("x")}}, {{cssxref("y")}}, {{cssxref("width")}}, {{cssxref("height")}}

files/en-us/web/svg/attribute/cy/index.md

@@ -9,14 +9,16 @@ spec-urls:
 
 {{SVGRef}}
 
-The **`cy`** attribute define the y-axis coordinate of a center point.
+The **`cy`** attribute defines the y-axis coordinate of a center point.
 
 You can use this attribute with the following SVG elements:
 
 - {{SVGElement("circle")}}
 - {{SVGElement("ellipse")}}
 - {{SVGElement("radialGradient")}}
 
+> **Note:** As a _geometry property_, {{cssxref("cy")}} can also be used as CSS property for `<circle>` and `<ellipse>`.
+
 ## Example
 
 ```css hidden
@@ -177,3 +179,6 @@ svg {
 
 - {{SVGAttr("cx")}}
 - {{SVGAttr("r")}}
+- {{SVGAttr("rx")}}
+- {{SVGAttr("ry")}}
+- Geometry properties: {{cssxref("cx")}}, {{cssxref("cy")}}, {{cssxref("r")}}, {{cssxref("rx")}}, {{cssxref("ry")}}, {{cssxref("x")}}, {{cssxref("y")}}, {{cssxref("width")}}, {{cssxref("height")}}