Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

SVG attributes: geometry property notes #34936

Merged
merged 3 commits into from
Jul 23, 2024
Merged

SVG attributes: geometry property notes #34936

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b0c0a11
SVG attributes: geometry properties
estelle Jul 20, 2024
fd280d6
SVG attributes: geometry properties
estelle Jul 20, 2024
a62867d
Update files/en-us/web/svg/attribute/x/index.md
estelle Jul 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions files/en-us/web/svg/attribute/cx/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,8 @@ For {{SVGElement('circle')}}, `cx` defines the x-axis coordinate of the center o
</tbody>
</table>

> **Note:** Starting with SVG2 `cx`, is a _Geometry Property_, meaning this attribute can also be used as CSS property for circles.
> [!Note]
> The x-axis coordinate of the center of the `<circle>` can also be defined with the {{cssxref("cx")}} _geometry property_. If set in CSS, the `cx` property value overrides the `cx` attribute value.

## ellipse

Expand All @@ -86,7 +87,8 @@ For {{SVGElement('ellipse')}}, `cx` defines the x-axis coordinate of the center
</tbody>
</table>

> **Note:** Starting with SVG2 `cx`, is a _Geometry Property_, meaning this attribute can also be used as CSS property for ellipses.
> [!Note]
> The x-axis coordinate of the center of the `<ellipse>` can also be defined with the {{cssxref("cx")}} _geometry property_. If set in CSS, the `cx` property value overrides the `cx` attribute value.

## radialGradient

Expand Down
6 changes: 4 additions & 2 deletions files/en-us/web/svg/attribute/cy/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,8 @@ For {{SVGElement('circle')}}, `cy` defines the y-axis coordinate of the center o
</tbody>
</table>

> **Note:** Starting with SVG2, `cy` is a _Geometry Property_ meaning this attribute can also be used as a CSS property for circles.
> [!Note]
> The y-axis coordinate of the center of the `<circle>` can also be defined with the {{cssxref("cy")}} _geometry property_. If set in CSS, the `cy` property value overrides the `cy` attribute value.

## ellipse

Expand All @@ -86,7 +87,8 @@ For {{SVGElement('ellipse')}}, `cy` defines the y-axis coordinate of the center
</tbody>
</table>

> **Note:** Starting with SVG2, `cy` is a _Geometry Property_ meaning this attribute can also be used as a CSS property for ellipses.
> [!Note]
> The y-axis coordinate of the center of the `<ellipse>` can also be defined with the {{cssxref("cy")}} _geometry property_. If set in CSS, the `cy` property value overrides the `cy` attribute value.

## radialGradient

Expand Down
3 changes: 2 additions & 1 deletion files/en-us/web/svg/attribute/r/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,8 @@ For {{SVGElement('circle')}}, `r` defines the radius of the circle and therefor
</tbody>
</table>

> **Note:** Starting with SVG2, `r` is a _Geometry Property_ meaning this attribute can also be used as a CSS property for circles.
> [!Note]
> The radius size of a `<circle>` can also be defined with the {{cssxref("r")}} _geometry property_.

## radialGradient

Expand Down
6 changes: 4 additions & 2 deletions files/en-us/web/svg/attribute/rx/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,8 @@ For {{SVGElement('ellipse')}}, `rx` defines the x-radius of the shape. With a va
</tbody>
</table>

> **Note:** Starting with SVG2, `rx` is a _Geometry Property_ meaning this attribute can also be used as a CSS property for ellipses.
> [!Note]
> The x-radius of the `<ellipse>` can also be defined with the {{cssxref("rx")}} _geometry property_. If set in CSS, the `rx` property value overrides the `rx` attribute value.

## rect

Expand Down Expand Up @@ -114,7 +115,8 @@ The way the value of the `rx` attribute is interpreted depend on both the {{SVGA
</tbody>
</table>

> **Note:** Starting with SVG2, `rx` is a _Geometry Property_ meaning this attribute can also be used as a CSS property for rects.
> [!Note]
> The horizontal curve of the corners of the `<rect>` can also be defined with the {{cssxref("rx")}} _geometry property_. If set in CSS, the `rx` property value overrides the `rx` attribute value.

## Specifications

Expand Down
6 changes: 4 additions & 2 deletions files/en-us/web/svg/attribute/ry/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,8 @@ For {{SVGElement('ellipse')}}, `ry` defines the y-radius of the shape. With a va
</tbody>
</table>

> **Note:** Starting with SVG2, `ry` is a _Geometry Property_ meaning this attribute can also be used as a CSS property for ellipses.
> [!Note]
> The y-radius of the `<ellipse>` can also be defined with the {{cssxref("ry")}} _geometry property_. If set in CSS, the `ry` property value overrides the `ry` attribute value.

## rect

Expand Down Expand Up @@ -114,7 +115,8 @@ The way the value of the `ry` attribute is interpreted depend on both the {{SVGA
</tbody>
</table>

> **Note:** Starting with SVG2, `ry` is a _Geometry Property_ meaning this attribute can also be used as a CSS property for rects.
> [!Note]
> The vertical curve of the corners of the `<rect>` can also be defined with the {{cssxref("ry")}} _geometry property_. If set in CSS, the `ry` property value overrides the `ry` attribute value.

## Specifications

Expand Down
15 changes: 10 additions & 5 deletions files/en-us/web/svg/attribute/x/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -867,7 +867,8 @@ For {{SVGElement('foreignObject')}}, `x` defines the x coordinate of the upper l
</tbody>
</table>

> **Note:** Starting with SVG2, `x` is a _Geometry Property_ meaning this attribute can also be used as a CSS property for `<foreignObject>`.
> [!Note]
> The x-axis coordinate of the `<foreignObject>` can also be defined with the {{cssxref("x")}} _geometry property_. If set in CSS, the `x` property value overrides the `x` attribute value.

### `<glyphRef>`

Expand Down Expand Up @@ -935,7 +936,8 @@ For {{SVGElement('image')}}, `x` defines the x coordinate of the upper left corn
</tbody>
</table>

> **Note:** Starting with SVG2, `x` is a _Geometry Property_ meaning this attribute can also be used as a CSS property for images.
> [!Note]
> The x-axis coordinate of the `<image>` can also be defined with the {{cssxref("x")}} _geometry property_. If set in CSS, the `x` property value overrides the `x` attribute value.

### `<mask>`

Expand Down Expand Up @@ -1030,7 +1032,8 @@ For {{SVGElement('rect')}}, `x` defines the x coordinate of the upper left corne
</tbody>
</table>

> **Note:** Starting with SVG2, `x` is a _Geometry Property_ meaning this attribute can also be used as a CSS property for rectangles.
> [!Note]
> The x-axis coordinate of the `<rect>` can also be defined with the {{cssxref("x")}} _geometry property_. If set in CSS, the `x` property value overrides the `x` attribute value.

### `<svg>`

Expand Down Expand Up @@ -1065,7 +1068,8 @@ For {{SVGElement('svg')}}, `x` defines the x coordinate of the upper left corner
</tbody>
</table>

> **Note:** Starting with SVG2, `x` is a _Geometry Property_ meaning this attribute can also be used as a CSS property for `<svg>`.
> [!Note]
> The x-axis coordinate of the `<svg>` can also be defined with the {{cssxref("x")}} _geometry property_. If set in CSS, the `x` property value overrides the `x` attribute value.

### `<text>`

Expand Down Expand Up @@ -1293,7 +1297,8 @@ For {{SVGElement('use')}}, `x` defines the x coordinate of the upper left corner
</tbody>
</table>

> **Note:** Starting with SVG2, `x` is a _Geometry Property_ meaning this attribute can also be used as a CSS property for used elements.
> [!Note]
> Declaring a `<length>` or `<percentage>` value in CSS using the {{cssxref("x")}} _geometry property_ overrides the x-axis coordinate of the `<use>` set by the `x` attribute in some browsers. This behavior is at-risk.
estelle marked this conversation as resolved.
Show resolved Hide resolved

## Examples

Expand Down
15 changes: 10 additions & 5 deletions files/en-us/web/svg/attribute/y/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -867,7 +867,8 @@ For {{SVGElement('foreignObject')}}, `y` defines the y coordinate of the upper l
</tbody>
</table>

> **Note:** Starting with SVG2, `y` is a _Geometry Property_ meaning this attribute can also be used as a CSS property for `<foreignObject>`.
> [!Note]
> The y-axis coordinate of the `<foreignObject>` can also be defined with the {{cssxref("y")}} _geometry property_. If set in CSS, the `y` property value overrides the `y` attribute value.

### `<glyphRef>`

Expand Down Expand Up @@ -931,7 +932,8 @@ For {{SVGElement('image')}}, `y` defines the y coordinate of the upper left corn
</tbody>
</table>

> **Note:** Starting with SVG2, `y` is a _Geometry Property_ meaning this attribute can also be used as a CSS property for images.
> [!Note]
> The y-axis coordinate of the `<image>` can also be defined with the {{cssxref("y")}} _geometry property_. If set in CSS, the `y` property value overrides the `y` attribute value.

### `<mask>`

Expand Down Expand Up @@ -1026,7 +1028,8 @@ For {{SVGElement('rect')}}, `y` defines the y coordinate of the upper left corne
</tbody>
</table>

> **Note:** Starting with SVG2, `y` is a _Geometry Property_ meaning this attribute can also be used as a CSS property for rectangles.
> [!Note]
> The y-axis coordinate of the `<rect>` can also be defined with the {{cssxref("y")}} _geometry property_. If set in CSS, the `y` property value overrides the `y` attribute value.

### `<svg>`

Expand Down Expand Up @@ -1061,7 +1064,8 @@ For {{SVGElement('svg')}}, `y` defines the y coordinate of the upper left corner
</tbody>
</table>

> **Note:** Starting with SVG2, `y` is a _Geometry Property_ meaning this attribute can also be used as a CSS property for `<svg>`.
> [!Note]
> The y-axis coordinate of the `<svg>` can also be defined with the {{cssxref("y")}} _geometry property_. If set in CSS, the `y` property value overrides the `y` attribute value.

### `<text>`

Expand Down Expand Up @@ -1289,7 +1293,8 @@ For {{SVGElement('use')}}, `y` defines the y coordinate of the upper left corner
</tbody>
</table>

> **Note:** Starting with SVG2, `y` is a _Geometry Property_ meaning this attribute can also be used as a CSS property for used elements.
> [!Note]
> Declaring a `<length>` or `<percentage>` value in CSS using the {{cssxref("y")}} _geometry property_ overrides the y-axis coordinate of the `<use>` set by the `y` attribute in some browsers. This behavior is at-risk.

## Examples

Expand Down