Vector-effect - Propriété CSS

vector-effect

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

Description rapide

Définit comment les transformations (rotations, changements d'échelle, etc.) agissent.

Statut

Problèmes de compatibilité ⚠

Utilisable sur

SVG

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.

Module W3C

SVG (Scalable Vector Graphics)

Schéma syntaxique de `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`.

⚠

Propriété encore très peu prise en charge. Cette page sera prochainement complétée

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;

Valeurs communes à toutes les propriétés :


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.

Prise en charge par les navigateurs (compatibilité).

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.

Propriété
vector-effect

Estimation de la prise en charge globale.

96%

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

Historique de la propriété `vector-effect`.

SVG (Scalable Vector Graphics)

Présentation de la propriété vector-effect.

28 Août 2012
Document de travail.
15 Septembre 2016
Candidat à la recommandation.

Voir aussi, concernant SVG.

La propriété vector-effect fait partie du module Scalable Vector Graphics (SVG) , 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 :

Définit le rayon d'un cercle en SVG.

Définit le rayon horizontal d'une ellipse, en SVG.

Définit le rayon vertical d'une elliipse, 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.

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...)