Vector-effect - Propriété CSS

vector-effect

Résumé des caractéristiques de la propriété vector-effect

Description rapide
Définit comment agissent les transformations (rotations, changements d'échelle, etc.).
Statut
Problèmes de compatibilité ⚠
Utilisable sur
SVG
Valeurs prédéfinies
none | non-scaling-stroke | non-scaling-size | non-rotation | fixed-position
Pourcentages
Ne s'appliquent pas.
Valeur initiale
none
Héritée par défaut
Non.
Type d'animation
Discrète : lors d'une animation, la propriété vector-effect passe d'une valeur à l'autre sans transition.
Ordre canonique
Single : valeur unique (l'ordre n'intervient pas).
Module W3C
SVG (Scalable Vector Graphics)

Schéma de la syntaxe de vector-effect.

vector-effect - Syntax DiagramSyntax diagram of the vector-effect CSS property. See stylescss.free.fr for details. none none non-scaling-stroke non-scaling-stroke non-scaling-size non-scaling-size non-rotation non-rotation fixed-position fixed-positionvector-effect:;vector-effect:;
Schéma syntaxique de la propriété vector-effect.
Les liens du schéma donnent accès à plus de détails sur les différentes valeurs

Description de la propriété vector-effect.

La propriété vector-effect définit des contraintes sur les transformations appliquées à un élément. Par exemple : les changements d'échelle ne doivent pas agir sur l'épaisseur des bordures.

Pour en apprendre plus sur les transformations, reportez-vous à la propriété transform ou à notre tutoriel sur les transformations.

Valeurs pour vector-effect.

  • vector-effect: none;

    Les transformations sont appliquées sans contraintes particulières.

    Dans les exemples, l'élément bleu est l'original, n'ayant subi aucune transformation. L'élément vert a été décalé, tourné de 30 degrés et agrandi.


    vector-effect:none;
  • vector-effect: non-scaling-stroke;

    Lors d'une transformation de changement d'échelle (scale(), l'épaisseur des bordures n'est pas modifiée.


    vector-effect:non-scaling-stroke;
  • vector-effect: non-scaling-size; ⚠

    Valeur non prise en chage à l'heure actuelle (2024).


    vector-effect:non-scaling-size;
  • vector-effect: non-rotation; ⚠

    Valeur non prise en chage à l'heure actuelle (2024).


    vector-effect:non-rotation;
  • vector-effect: fixed-position; ⚠

    Valeur non prise en chage à l'heure actuelle (2024).


    vector-effect:fixed-position;
  • vector-effect: initial; (none) vector-effect: inherit; vector-effect: revert; vector-effect: revertLayer; vector-effect: unset;

    Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple interactif avec la propriété vector-effect.

Le rectangle vert a subi une transformation : translation, échelle et rotation. Le rectangle bleu indique sa position de départ.

vector-effect :
SVG

Compatibilité des navigateurs avec vector-effect.

Le tableau ci-dessous est trompeur : la propriété vector-effect est bien reconnue par les navigateurs, mais seulement avec la valeur non-scaling-stroke.

Colonne 1
Traitement par les navigateurs de la propriété vector-effect.
1
Propriété
vector-effect
Estimation de la prise en charge globale.
95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Firefox

Edge

Chrome

Safari

Opéra

Chrome pour Androïd

Safari sur IOS

Samsung Internet

Opéra Mobile

Androïd Brower

Firefox pour Androïd

QQ Browser

Baidu Browser

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse

Histoire de la propriété vector-effect.

  • SVG (Scalable Vector Graphics)

    Concernant vector-effect. Présentation de la propriété vector-effect.
    WD
    28 Août 2012
    Document de travail.
    CR
    15 Septembre 2016
    Candidat à la recommandation.
    PR
    REC

Voir aussi, concernant SVG.

La propriété vector-effect fait partie du module SVG (Scalable Vector Graphics), regroupant toutes les propriétés relatives au SVG. Les définitions suivantes sont également décrites dans ce même module.

Propriétés :

r
Définit le rayon d'un cercle en SVG.
rx
Définit le rayon horizontal d'une ellipse, en SVG.
ry
Définit le rayon vertical d'une ellipse, en SVG.
shape-rendering
Définit si la priorité doit être donnée à la précision ou bien au temps de calcul, lors du tracé d'une forme en SVG.
stop-color
Définit la couleur d'un point de stop dans un dégradé.
stop-opacity
Définit l'opacité de la couleur d'un point de stop dans un dégradé.
text-anchor
Définit si un texte en SVG s'ancre par le milieu, le départ ou la fin.
text-rendering
Active ou désactive le traitement de la typographie évoluée (ligatures, crénage...)
Vector-effect
Définit comment agissent les transformations (rotations, changements d'échelle, etc.).