y
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since juillet 2020.
La propriété CSS y définit la coordonnée de l'axe y du coin supérieur gauche de l'élément de forme SVG <rect>, d'image <image>, de fenêtre <foreignObject> et de l'élément imbriqué <svg> par rapport au plus proche <svg> présent dans le système de coordonée. S'il est présent, il remplace l'attribut y.
Note :
La propriété y ne s'applique qu'aux éléments <rect>, <image>, <foreignObject>, et <svg> imbriqués dans un élément <svg>. Il n'a aucun effet sur les zones <svg> extérieures et ne s'applique pas aux autres éléments SVG ni aux éléments ou pseudo-éléments HTML.
Syntaxe
/* Valeurs de longueur et en pourcentage */
y: 10px;
y: 10%;
/* Valeurs globales */
y: inherit;
y: initial;
y: revert;
y: revert-layer;
y: unset;
Valeurs
La longueur <length> et le pourcentage <percentage> indiquent la position des coordonnées de l'axe des y du coin supérieur gauche de l'élément SVG.
<length>-
En tant que longueur absolue ou relative, elle peut être exprimée dans n'importe quelle unité autorisée par le type de données CSS
<length>. <percentage>-
Les pourcentages se réfèrent à la hauteur du SVG
viewBox, s'il est déclaré, sinon, le pourcentage fait référence à la hauteur de la fenêtre SVG actuelle.
Définition formelle
| Valeur initiale | 0 |
|---|---|
| Applicabilité | <svg>, <rect>, <image>, and <foreignObject> elements in <svg> |
| Héritée | non |
| Pourcentages | refer to the height of the current SVG viewport |
| Valeur calculée | le pourcentage tel que spécifié ou une longueur absolue |
| Type d'animation | by computed value type |
Syntaxe formelle
y =
<length-percentage>
<length-percentage> =
<length> |
<percentage>
Exemples
Définition des coordonnées de l'axe y des formes SVG
Cet exemple illustre le cas d'utilisation de base de y, et comment la propriété CSS y a préséance sur l'attribut y.
HTML
Nous incluons quatre SVG identiques de l'élément <rect> ; leurs valeurs des attributs x et y sont toutes de 10, ce qui signifie que les quatre rectangles sont tous au même endroit, 10px en haut et à gauche de la fenêtre SVG.
<svg>
<rect width="40" height="40" x="10" y="10" />
<rect width="40" height="40" x="10" y="10" />
<rect width="40" height="40" x="10" y="10" />
<rect width="40" height="40" x="10" y="10" />
</svg>
CSS
Nous stylisons tous les rectangles pour qu'ils aient une bordure noire et soient légèrement transparents, de sorte que les rectangles qui se chevauchent soient visibles. Nous fournissons aux rectangles différents remplissages fill et valeurs en y.
svg {
border: 1px solid;
}
rect {
fill: none;
stroke: black;
opacity: 0.8;
}
rect:nth-of-type(2) {
y: -20px;
fill: red;
}
rect:nth-of-type(3) {
y: 4em;
fill: yellow;
}
rect:nth-of-type(4) {
y: 60%;
fill: orange;
}
Résultats
Les bords supérieurs des rectangles sont à 10 (à partir de l'attribut), -20px, 4em, et 60%, respectivement. Le rectangle est 40pxgrand, donc le -20px place la moitié du rectangle rouge à l'extérieur de la fenêtre. Le SVG est de 150px de large, de sorte que le côté supérieur du rectangle orange se trouve à 90px à partir du haut de la fenêtre SVG.
Spécifications
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # Y |
Compatibilité des navigateurs
Loading…