From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../index.html | 227 ++++++++++ .../fr/web/svg/attribute/accent-height/index.html | 50 +++ files/fr/web/svg/attribute/clip-path/index.html | 103 +++++ files/fr/web/svg/attribute/color/index.html | 67 +++ .../attribute/conditional_processing/index.html | 38 ++ files/fr/web/svg/attribute/core/index.html | 67 +++ files/fr/web/svg/attribute/cx/index.html | 172 ++++++++ files/fr/web/svg/attribute/cy/index.html | 172 ++++++++ files/fr/web/svg/attribute/d/index.html | 196 +++++++++ files/fr/web/svg/attribute/dx/index.html | 294 +++++++++++++ files/fr/web/svg/attribute/dy/index.html | 297 +++++++++++++ files/fr/web/svg/attribute/events/index.html | 43 ++ files/fr/web/svg/attribute/fill-opacity/index.html | 91 ++++ files/fr/web/svg/attribute/fill-rule/index.html | 166 +++++++ files/fr/web/svg/attribute/fill/index.html | 453 +++++++++++++++++++ files/fr/web/svg/attribute/height/index.html | 71 +++ files/fr/web/svg/attribute/in/index.html | 103 +++++ files/fr/web/svg/attribute/index.html | 477 +++++++++++++++++++++ files/fr/web/svg/attribute/mask/index.html | 86 ++++ files/fr/web/svg/attribute/points/index.html | 142 ++++++ files/fr/web/svg/attribute/presentation/index.html | 278 ++++++++++++ .../svg/attribute/preserveaspectratio/index.html | 423 ++++++++++++++++++ files/fr/web/svg/attribute/seed/index.html | 44 ++ .../web/svg/attribute/stroke-dasharray/index.html | 89 ++++ .../web/svg/attribute/stroke-dashoffset/index.html | 115 +++++ .../fr/web/svg/attribute/stroke-linecap/index.html | 195 +++++++++ .../web/svg/attribute/stroke-linejoin/index.html | 312 ++++++++++++++ .../web/svg/attribute/stroke-miterlimit/index.html | 116 +++++ .../fr/web/svg/attribute/stroke-opacity/index.html | 93 ++++ files/fr/web/svg/attribute/stroke-width/index.html | 93 ++++ files/fr/web/svg/attribute/stroke/index.html | 93 ++++ files/fr/web/svg/attribute/style/index.html | 85 ++++ files/fr/web/svg/attribute/styling/index.html | 32 ++ files/fr/web/svg/attribute/text-anchor/index.html | 93 ++++ files/fr/web/svg/attribute/transform/index.html | 264 ++++++++++++ files/fr/web/svg/attribute/viewbox/index.html | 67 +++ files/fr/web/svg/attribute/width/index.html | 68 +++ files/fr/web/svg/attribute/x/index.html | 88 ++++ files/fr/web/svg/element/a/index.html | 134 ++++++ files/fr/web/svg/element/altglyph/index.html | 113 +++++ files/fr/web/svg/element/altglyphdef/index.html | 42 ++ files/fr/web/svg/element/altglyphitem/index.html | 44 ++ files/fr/web/svg/element/animate/index.html | 109 +++++ files/fr/web/svg/element/animatecolor/index.html | 95 ++++ files/fr/web/svg/element/animatemotion/index.html | 111 +++++ .../fr/web/svg/element/animatetransform/index.html | 95 ++++ files/fr/web/svg/element/circle/index.html | 68 +++ files/fr/web/svg/element/clippath/index.html | 114 +++++ files/fr/web/svg/element/defs/index.html | 137 ++++++ files/fr/web/svg/element/desc/index.html | 48 +++ files/fr/web/svg/element/ellipse/index.html | 155 +++++++ files/fr/web/svg/element/feblend/index.html | 117 +++++ files/fr/web/svg/element/fecolormatrix/index.html | 163 +++++++ .../web/svg/element/fecomponenttransfer/index.html | 165 +++++++ files/fr/web/svg/element/fecomposite/index.html | 288 +++++++++++++ .../fr/web/svg/element/feconvolvematrix/index.html | 169 ++++++++ .../web/svg/element/fediffuselighting/index.html | 163 +++++++ .../web/svg/element/fedisplacementmap/index.html | 119 +++++ files/fr/web/svg/element/fedistantlight/index.html | 79 ++++ files/fr/web/svg/element/fedropshadow/index.html | 110 +++++ files/fr/web/svg/element/feflood/index.html | 110 +++++ files/fr/web/svg/element/fefunca/index.html | 76 ++++ files/fr/web/svg/element/fefuncb/index.html | 76 ++++ files/fr/web/svg/element/fefuncg/index.html | 76 ++++ files/fr/web/svg/element/fefuncr/index.html | 76 ++++ files/fr/web/svg/element/fegaussianblur/index.html | 141 ++++++ files/fr/web/svg/element/feimage/index.html | 111 +++++ files/fr/web/svg/element/femerge/index.html | 113 +++++ files/fr/web/svg/element/femergenode/index.html | 100 +++++ files/fr/web/svg/element/femorphology/index.html | 165 +++++++ files/fr/web/svg/element/feoffset/index.html | 112 +++++ files/fr/web/svg/element/fepointlight/index.html | 105 +++++ .../web/svg/element/fespecularlighting/index.html | 119 +++++ files/fr/web/svg/element/fespotlight/index.html | 110 +++++ files/fr/web/svg/element/fetile/index.html | 115 +++++ files/fr/web/svg/element/feturbulence/index.html | 113 +++++ files/fr/web/svg/element/filter/index.html | 120 ++++++ files/fr/web/svg/element/foreignobject/index.html | 121 ++++++ files/fr/web/svg/element/g/index.html | 86 ++++ files/fr/web/svg/element/hkern/index.html | 50 +++ files/fr/web/svg/element/image/index.html | 112 +++++ files/fr/web/svg/element/index.html | 295 +++++++++++++ files/fr/web/svg/element/line/index.html | 118 +++++ files/fr/web/svg/element/lineargradient/index.html | 100 +++++ files/fr/web/svg/element/marker/index.html | 135 ++++++ files/fr/web/svg/element/mask/index.html | 116 +++++ files/fr/web/svg/element/metadata/index.html | 63 +++ files/fr/web/svg/element/mpath/index.html | 108 +++++ files/fr/web/svg/element/path/index.html | 69 +++ files/fr/web/svg/element/pattern/index.html | 166 +++++++ files/fr/web/svg/element/polygon/index.html | 102 +++++ files/fr/web/svg/element/polyline/index.html | 179 ++++++++ files/fr/web/svg/element/radialgradient/index.html | 157 +++++++ files/fr/web/svg/element/rect/index.html | 74 ++++ files/fr/web/svg/element/stop/index.html | 100 +++++ files/fr/web/svg/element/style/index.html | 136 ++++++ files/fr/web/svg/element/svg/index.html | 154 +++++++ files/fr/web/svg/element/switch/index.html | 93 ++++ files/fr/web/svg/element/symbol/index.html | 119 +++++ files/fr/web/svg/element/text/index.html | 159 +++++++ files/fr/web/svg/element/title/index.html | 86 ++++ files/fr/web/svg/element/tspan/index.html | 135 ++++++ files/fr/web/svg/element/use/index.html | 182 ++++++++ files/fr/web/svg/index.html | 126 ++++++ files/fr/web/svg/index/index.html | 8 + files/fr/web/svg/sources_compatibilite/index.html | 19 + .../fr/web/svg/svg_animation_with_smil/index.html | 129 ++++++ files/fr/web/svg/svg_en_tant_qu_image/index.html | 74 ++++ .../svg/tutoriel/contenu_embarque_svg/index.html | 36 ++ .../d\303\251coupages_et_masquages/index.html" | 91 ++++ .../web/svg/tutoriel/fills_and_strokes/index.html | 177 ++++++++ files/fr/web/svg/tutoriel/filtres/index.html | 147 +++++++ .../fr/web/svg/tutoriel/formes_de_base/index.html | 156 +++++++ files/fr/web/svg/tutoriel/gradients/index.html | 224 ++++++++++ files/fr/web/svg/tutoriel/index.html | 36 ++ files/fr/web/svg/tutoriel/introduction/index.html | 54 +++ .../index.html" | 87 ++++ files/fr/web/svg/tutoriel/motifs/index.html | 266 ++++++++++++ files/fr/web/svg/tutoriel/paths/index.html | 334 +++++++++++++++ files/fr/web/svg/tutoriel/polices_svg/index.html | 106 +++++ .../fr/web/svg/tutoriel/positionnement/index.html | 55 +++ files/fr/web/svg/tutoriel/premiers_pas/index.html | 98 +++++ files/fr/web/svg/tutoriel/svg_image_tag/index.html | 36 ++ files/fr/web/svg/tutoriel/texts/index.html | 124 ++++++ files/fr/web/svg/tutoriel/tools_for_svg/index.html | 70 +++ .../tutoriel/transformations_de_base/index.html | 113 +++++ 126 files changed, 16120 insertions(+) create mode 100644 files/fr/web/svg/application_d_effets_svg_a_du_contenu_html/index.html create mode 100644 files/fr/web/svg/attribute/accent-height/index.html create mode 100644 files/fr/web/svg/attribute/clip-path/index.html create mode 100644 files/fr/web/svg/attribute/color/index.html create mode 100644 files/fr/web/svg/attribute/conditional_processing/index.html create mode 100644 files/fr/web/svg/attribute/core/index.html create mode 100644 files/fr/web/svg/attribute/cx/index.html create mode 100644 files/fr/web/svg/attribute/cy/index.html create mode 100644 files/fr/web/svg/attribute/d/index.html create mode 100644 files/fr/web/svg/attribute/dx/index.html create mode 100644 files/fr/web/svg/attribute/dy/index.html create mode 100644 files/fr/web/svg/attribute/events/index.html create mode 100644 files/fr/web/svg/attribute/fill-opacity/index.html create mode 100644 files/fr/web/svg/attribute/fill-rule/index.html create mode 100644 files/fr/web/svg/attribute/fill/index.html create mode 100644 files/fr/web/svg/attribute/height/index.html create mode 100644 files/fr/web/svg/attribute/in/index.html create mode 100644 files/fr/web/svg/attribute/index.html create mode 100644 files/fr/web/svg/attribute/mask/index.html create mode 100644 files/fr/web/svg/attribute/points/index.html create mode 100644 files/fr/web/svg/attribute/presentation/index.html create mode 100644 files/fr/web/svg/attribute/preserveaspectratio/index.html create mode 100644 files/fr/web/svg/attribute/seed/index.html create mode 100644 files/fr/web/svg/attribute/stroke-dasharray/index.html create mode 100644 files/fr/web/svg/attribute/stroke-dashoffset/index.html create mode 100644 files/fr/web/svg/attribute/stroke-linecap/index.html create mode 100644 files/fr/web/svg/attribute/stroke-linejoin/index.html create mode 100644 files/fr/web/svg/attribute/stroke-miterlimit/index.html create mode 100644 files/fr/web/svg/attribute/stroke-opacity/index.html create mode 100644 files/fr/web/svg/attribute/stroke-width/index.html create mode 100644 files/fr/web/svg/attribute/stroke/index.html create mode 100644 files/fr/web/svg/attribute/style/index.html create mode 100644 files/fr/web/svg/attribute/styling/index.html create mode 100644 files/fr/web/svg/attribute/text-anchor/index.html create mode 100644 files/fr/web/svg/attribute/transform/index.html create mode 100644 files/fr/web/svg/attribute/viewbox/index.html create mode 100644 files/fr/web/svg/attribute/width/index.html create mode 100644 files/fr/web/svg/attribute/x/index.html create mode 100644 files/fr/web/svg/element/a/index.html create mode 100644 files/fr/web/svg/element/altglyph/index.html create mode 100644 files/fr/web/svg/element/altglyphdef/index.html create mode 100644 files/fr/web/svg/element/altglyphitem/index.html create mode 100644 files/fr/web/svg/element/animate/index.html create mode 100644 files/fr/web/svg/element/animatecolor/index.html create mode 100644 files/fr/web/svg/element/animatemotion/index.html create mode 100644 files/fr/web/svg/element/animatetransform/index.html create mode 100644 files/fr/web/svg/element/circle/index.html create mode 100644 files/fr/web/svg/element/clippath/index.html create mode 100644 files/fr/web/svg/element/defs/index.html create mode 100644 files/fr/web/svg/element/desc/index.html create mode 100644 files/fr/web/svg/element/ellipse/index.html create mode 100644 files/fr/web/svg/element/feblend/index.html create mode 100644 files/fr/web/svg/element/fecolormatrix/index.html create mode 100644 files/fr/web/svg/element/fecomponenttransfer/index.html create mode 100644 files/fr/web/svg/element/fecomposite/index.html create mode 100644 files/fr/web/svg/element/feconvolvematrix/index.html create mode 100644 files/fr/web/svg/element/fediffuselighting/index.html create mode 100644 files/fr/web/svg/element/fedisplacementmap/index.html create mode 100644 files/fr/web/svg/element/fedistantlight/index.html create mode 100644 files/fr/web/svg/element/fedropshadow/index.html create mode 100644 files/fr/web/svg/element/feflood/index.html create mode 100644 files/fr/web/svg/element/fefunca/index.html create mode 100644 files/fr/web/svg/element/fefuncb/index.html create mode 100644 files/fr/web/svg/element/fefuncg/index.html create mode 100644 files/fr/web/svg/element/fefuncr/index.html create mode 100644 files/fr/web/svg/element/fegaussianblur/index.html create mode 100644 files/fr/web/svg/element/feimage/index.html create mode 100644 files/fr/web/svg/element/femerge/index.html create mode 100644 files/fr/web/svg/element/femergenode/index.html create mode 100644 files/fr/web/svg/element/femorphology/index.html create mode 100644 files/fr/web/svg/element/feoffset/index.html create mode 100644 files/fr/web/svg/element/fepointlight/index.html create mode 100644 files/fr/web/svg/element/fespecularlighting/index.html create mode 100644 files/fr/web/svg/element/fespotlight/index.html create mode 100644 files/fr/web/svg/element/fetile/index.html create mode 100644 files/fr/web/svg/element/feturbulence/index.html create mode 100644 files/fr/web/svg/element/filter/index.html create mode 100644 files/fr/web/svg/element/foreignobject/index.html create mode 100644 files/fr/web/svg/element/g/index.html create mode 100644 files/fr/web/svg/element/hkern/index.html create mode 100644 files/fr/web/svg/element/image/index.html create mode 100644 files/fr/web/svg/element/index.html create mode 100644 files/fr/web/svg/element/line/index.html create mode 100644 files/fr/web/svg/element/lineargradient/index.html create mode 100644 files/fr/web/svg/element/marker/index.html create mode 100644 files/fr/web/svg/element/mask/index.html create mode 100644 files/fr/web/svg/element/metadata/index.html create mode 100644 files/fr/web/svg/element/mpath/index.html create mode 100644 files/fr/web/svg/element/path/index.html create mode 100644 files/fr/web/svg/element/pattern/index.html create mode 100644 files/fr/web/svg/element/polygon/index.html create mode 100644 files/fr/web/svg/element/polyline/index.html create mode 100644 files/fr/web/svg/element/radialgradient/index.html create mode 100644 files/fr/web/svg/element/rect/index.html create mode 100644 files/fr/web/svg/element/stop/index.html create mode 100644 files/fr/web/svg/element/style/index.html create mode 100644 files/fr/web/svg/element/svg/index.html create mode 100644 files/fr/web/svg/element/switch/index.html create mode 100644 files/fr/web/svg/element/symbol/index.html create mode 100644 files/fr/web/svg/element/text/index.html create mode 100644 files/fr/web/svg/element/title/index.html create mode 100644 files/fr/web/svg/element/tspan/index.html create mode 100644 files/fr/web/svg/element/use/index.html create mode 100644 files/fr/web/svg/index.html create mode 100644 files/fr/web/svg/index/index.html create mode 100644 files/fr/web/svg/sources_compatibilite/index.html create mode 100644 files/fr/web/svg/svg_animation_with_smil/index.html create mode 100644 files/fr/web/svg/svg_en_tant_qu_image/index.html create mode 100644 files/fr/web/svg/tutoriel/contenu_embarque_svg/index.html create mode 100644 "files/fr/web/svg/tutoriel/d\303\251coupages_et_masquages/index.html" create mode 100644 files/fr/web/svg/tutoriel/fills_and_strokes/index.html create mode 100644 files/fr/web/svg/tutoriel/filtres/index.html create mode 100644 files/fr/web/svg/tutoriel/formes_de_base/index.html create mode 100644 files/fr/web/svg/tutoriel/gradients/index.html create mode 100644 files/fr/web/svg/tutoriel/index.html create mode 100644 files/fr/web/svg/tutoriel/introduction/index.html create mode 100644 "files/fr/web/svg/tutoriel/introduction_\303\240_svg_dans_html/index.html" create mode 100644 files/fr/web/svg/tutoriel/motifs/index.html create mode 100644 files/fr/web/svg/tutoriel/paths/index.html create mode 100644 files/fr/web/svg/tutoriel/polices_svg/index.html create mode 100644 files/fr/web/svg/tutoriel/positionnement/index.html create mode 100644 files/fr/web/svg/tutoriel/premiers_pas/index.html create mode 100644 files/fr/web/svg/tutoriel/svg_image_tag/index.html create mode 100644 files/fr/web/svg/tutoriel/texts/index.html create mode 100644 files/fr/web/svg/tutoriel/tools_for_svg/index.html create mode 100644 files/fr/web/svg/tutoriel/transformations_de_base/index.html (limited to 'files/fr/web/svg') diff --git a/files/fr/web/svg/application_d_effets_svg_a_du_contenu_html/index.html b/files/fr/web/svg/application_d_effets_svg_a_du_contenu_html/index.html new file mode 100644 index 0000000000..cb06ea5315 --- /dev/null +++ b/files/fr/web/svg/application_d_effets_svg_a_du_contenu_html/index.html @@ -0,0 +1,227 @@ +--- +title: Application d'effets SVG à du contenu HTML +slug: Web/SVG/Application_d_effets_SVG_a_du_contenu_HTML +tags: + - CSS + - Guide + - HTML + - SVG +translation_of: Web/SVG/Applying_SVG_effects_to_HTML_content +--- +

Les navigateurs modernes supportent le format SVG utilisant du CSS pour appliquer des effets graphiques au contenu HTML.

+ +

Vous pouvez éditer un SVG avec du CSS, soit directement dans le document, soit dans une feuille de style externe. Il y a 3 propriétés que vous pouvez utiliser : mask, clip-path et filter.

+ +
Note : Dans des fichiers externes, les références à un SVG doivent être à la même origine que le document de référence.
+ +

Utilisation de SVG intégré

+ +

Pour appliquer un effet CSS à un SVG, vous devez dans un premier temps créer la feuille CSS qui fait référence au SVG à éditer.

+ +
<style>p { mask: url(#my-mask); }</style>
+
+ +

Dans l'exemple ci-dessus, tous les paragraphes utilisent un SVG <mask> avec l'ID de my-mask.

+ +

Exemple : Application d'un masque

+ +

Par exemple, vous pouvez appliquer un dégradé à du contenu HTML à l'intérieur de votre document en utilisant SVG et du code CSS similaire à celui-ci :

+ +
<svg height="0">
+  <mask id="mask-1">
+    <linearGradient id="gradient-1" y2="1">
+      <stop stop-color="white" offset="0"/>
+      <stop stop-opacity="0" offset="1"/>
+    </linearGradient>
+    <circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/>
+    <rect x="0.5" y="0.2" width="300" height="100" fill="url(#gradient-1)"/>
+  </mask>
+</svg>
+
+ +
.target {
+  mask: url(#mask-1);
+}
+p {
+  width: 300px;
+  border: 1px solid #000;
+  display: inline-block;
+}
+ +

Notez que dans ce code CSS, le masque est spécifié à l'aide d'une URL à l'ID #mask-1, qui est l'ID du masque SVG spécifié précédemment. Tout le reste concerne le dégradé.

+ +

L'application d'effet SVG à du (X)HTML est réalisé en affectant la classe cible définie ci-dessus à un élément, comme ceci :

+ +
<p class="target" style="background:lime;">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
+    ut labore et dolore magna aliqua. Ut enim ad minim veniam.
+</p>
+<p>
+    Lorem ipsum dolor sit amet, consectetur adipisicing
+    <b class="target">elit, sed do eiusmod tempor incididunt
+    ut labore et dolore magna aliqua.</b>
+    Ut enim ad minim veniam.
+</p>
+
+ +

L'exemple ci-dessus serait rendu avec le masque appliqué.

+ +

{{EmbedLiveSample('Exemple_Application_d\'un_masque', 650, 200)}}

+ +

Exemple : Rogner

+ +

Cet exemple montre comment utiliser un SVG pour rogner du contenu HTML. Remarquez que même les zones cliquables (les liens) sont rognées.

+ +
<p class="target" style="background:lime;">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
+    ut labore et dolore magna aliqua. Ut enim ad minim veniam.
+</p>
+<p>
+    Lorem ipsum dolor sit amet, consectetur adipisicing
+    <b class="target">elit, sed do eiusmod tempor incididunt
+    ut labore et dolore magna aliqua.</b>
+    Ut enim ad minim veniam.
+</p>
+
+<button onclick="toggleRadius()">Toggle radius</button>
+
+<svg height="0">
+  <clipPath id="clipping-path-1" clipPathUnits="objectBoundingBox">
+    <circle cx="0.25" cy="0.25" r="0.25" id="circle"/>
+    <rect x="0.5" y="0.2" width="0.5" height="0.8"/>
+  </clipPath>
+</svg>
+
+ +
.target {
+  clip-path: url(#clipping-path-1);
+}
+p {
+  width: 300px;
+  border: 1px solid #000;
+  display: inline-block;
+}
+ +

Ce code crée une zone cliquable en forme de cercle et de rectangle associé à l'ID #clipping-path-1 qui est référencé dans le CSS. clip-path peut être associé à n'importe quel élément avec la classe target.

+ +

Vous pouvez faire des changements en temps réel et vous rendre compte qu'ils affectent immédiatement le rendu HTML. Par exemple, vous pouvez redimensionner le cercle à l'aide du clip-path établi ci-dessus :

+ +
function toggleRadius() {
+  var circle = document.getElementById("circle");
+  circle.r.baseVal.value = 0.40 - circle.r.baseVal.value;
+}
+
+ +

{{EmbedLiveSample('Exemple_Rogner', 650, 200)}}

+ +

Exemple : Filtres

+ +

Cet exemple montre comment utiliser des filtres avec un SVG. À l'aide du CSS, nous appliquons plusieurs filtres à trois éléments à la fois dans leur état normal, que quand ils sont survolés par la souris (hover).

+ +
<p class="target" style="background: lime;">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
+    ut labore et dolore magna aliqua. Ut enim ad minim veniam.
+</p>
+<pre class="target">lorem</pre>
+<p>
+    Lorem ipsum dolor sit amet, consectetur adipisicing
+    <b class="target">elit, sed do eiusmod tempor incididunt
+    ut labore et dolore magna aliqua.</b>
+    Ut enim ad minim veniam.
+</p>
+
+ +

N'importe quel filtre SVG peut être appliqué de cette façon. Par exemple, pour appliquer un effet de flou, vous pouvez utiliser :

+ +
<svg height="0">
+  <filter id="f1">
+    <feGaussianBlur stdDeviation="3"/>
+  </filter>
+</svg>
+ +

Vous pouvez aussi appliquer une matrice de transformation des couleurs :

+ +
<svg height="0">
+  <filter id="f2">
+    <feColorMatrix values="0.3333 0.3333 0.3333 0 0
+                           0.3333 0.3333 0.3333 0 0
+                           0.3333 0.3333 0.3333 0 0
+                           0      0      0      1 0"/>
+  </filter>
+</svg>
+
+ +

Et encore d'autres filtres :

+ +
<svg height="0">
+  <filter id="f3">
+    <feConvolveMatrix filterRes="100 100" style="color-interpolation-filters:sRGB"
+      order="3" kernelMatrix="0 -1 0   -1 4 -1   0 -1 0" preserveAlpha="true"/>
+  </filter>
+  <filter id="f4">
+    <feSpecularLighting surfaceScale="5" specularConstant="1"
+                        specularExponent="10" lighting-color="white">
+      <fePointLight x="-5000" y="-10000" z="20000"/>
+    </feSpecularLighting>
+  </filter>
+  <filter id="f5">
+    <feColorMatrix values="1 0 0 0 0
+                           0 1 0 0 0
+                           0 0 1 0 0
+                           0 1 0 0 0" style="color-interpolation-filters:sRGB"/>
+  </filter>
+</svg>
+ +

Les cinq filtres sont appliqués en utilisant le CSS suivant :

+ +
p.target { filter:url(#f3); }
+p.target:hover { filter:url(#f5); }
+b.target { filter:url(#f1); }
+b.target:hover { filter:url(#f4); }
+pre.target { filter:url(#f2); }
+pre.target:hover { filter:url(#f3); }
+
+ +

{{EmbedLiveSample('Exemple_Filtres', 650, 200)}}

+ +

View this example live

+ +

Exemple : Texte flouté

+ +

Pour flouter le texte, Webkit a un filtre CSS (préfixé) appelé blur (voir aussi CSS filter). Vous pouvez obtenir le même effet en utilisant des filtres SVG.

+ +
<p class="blur">Time to clean my glasses</p>
+<svg height="0">
+  <defs>
+    <filter id="wherearemyglasses" x="0" y="0">
+    <feGaussianBlur in="SourceGraphic" stdDeviation="1"/>
+    </filter>
+  </defs>
+</svg>
+
+ +

Vous pouvez appliquer le filtre SVG et le filtre CSS à la même classe :

+ +
.blur { filter: url(#wherearemyglasses); }
+ +

{{ EmbedLiveSample('Exemple_Texte_flouté', 300, 100) }}

+ +

Le floutage est un calcul assez lourd alors utilisez le avec précaution et faites particulièrement attention aux éléments scrollables ou animés.

+ +

Utilisation de références externes

+ +

Vous pouvez utiliser des fichiers externes pour rogner ou pour appliquer des masques et des filtres SVG, tant que cette source vient de la même origine que le document HTML auquel il est appliqué.

+ +

Par exemple, si votre CSS est un fichier nommé default.css, il pourrait contenir le code ci-dessous :

+ +
.target { clip-path: url(resources.svg#c1); }
+ +

Le SVG est alors importé depuis un fichier nommé resources.svg, utilisant clip-path avec l'ID c1.

+ +

Voir aussi

+ + diff --git a/files/fr/web/svg/attribute/accent-height/index.html b/files/fr/web/svg/attribute/accent-height/index.html new file mode 100644 index 0000000000..e19d3c01bd --- /dev/null +++ b/files/fr/web/svg/attribute/accent-height/index.html @@ -0,0 +1,50 @@ +--- +title: accent-height +slug: Web/SVG/Attribute/accent-height +tags: + - Attribut + - NeedsCompatTable + - NeedsExample + - NeedsUpdate + - Reference + - SVG +translation_of: Web/SVG/Attribute/accent-height +--- +
{{SVGRef}}
+ +

L'attribut accent-height définit la distance entre l'origine et le haut des accents placés sur les caractères. Cette distance est mesurée dans le système de coordonnées de la police.

+ +

Si cet attribut n'est pas défini, l'effet obtenu est identique à celui obtenu avec la valeur de l'attribut {{SVGAttr("ascent")}}.

+ +

Contexte d'utilisation

+ + + + + + + + + + + + + + + + + + + + +
CatégoriesAucune
Type de valeur<number>
Peut être animéNon
SpécificationSVG 1.1 (seconde édition)
+ +

{{page("/fr/docs/Web/SVG/Content_type","Number")}}

+ +

Éléments

+ +

On peut utiliser l'attribut accent-height sur les éléments suivants :

+ + diff --git a/files/fr/web/svg/attribute/clip-path/index.html b/files/fr/web/svg/attribute/clip-path/index.html new file mode 100644 index 0000000000..11078c3e3f --- /dev/null +++ b/files/fr/web/svg/attribute/clip-path/index.html @@ -0,0 +1,103 @@ +--- +title: clip-path +slug: Web/SVG/Attribute/clip-path +tags: + - SVG + - SVG Attribute +translation_of: Web/SVG/Attribute/clip-path +--- +
{{SVGRef}}
+ +

L'attribut clip-path permet d'appliquer un détourage à un élément.

+ +

Note: clip-path étant un attribut de présentation, il peut être utilisé comme propriété CSS.

+ +

Cet attribut peut être appliqué sur tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('a')}}, {{SVGElement('circle')}}, {{SVGElement('clipPath')}}, {{SVGElement('ellipse')}}, {{SVGElement('g')}}, {{SVGElement('glyph')}}, {{SVGElement('image')}}, {{SVGElement('line')}}, {{SVGElement('marker')}}, {{SVGElement('mask')}}, {{SVGElement('path')}}, {{SVGElement('pattern')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('svg')}}, {{SVGElement('symbol')}}, {{SVGElement('text')}}, {{SVGElement('use')}}

+ +
+ + +
<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+  <clipPath id="myClip" clipPathUnits="objectBoundingBox">
+    <circle cx=".5" cy=".5" r=".5" />
+  </clipPath>
+
+  <!-- En haut à gauche: Applique un détourage précédemment crée -->
+  <rect x="1" y="1" width="8" height="8" stroke="green"
+        clip-path="url(#myClip)" />
+
+  <!-- En haut à droite: Applique un détourage sur fill-box via une forme CSS.
+       Revient à créer un détourage avec clipPathUnits="objectBoundingBox" -->
+  <rect x="11" y="1" width="8" height="8" stroke="green"
+        clip-path="circle() fill-box" />
+
+  <!-- En bas à gauche: Applique un détourage sur stroke-box via une forme CSS. -->
+  <rect x="1" y="11" width="8" height="8" stroke="green"
+        clip-path="circle() stroke-box" />
+
+  <!-- En bas à droite: Applique un détourage sur view-box via une forme CSS.
+       Revient à créer un détourage avec clipPathUnits="userSpaceOnUse" -->
+  <rect x="11" y="11" width="8" height="8" stroke="green"
+        clip-path="circle() view-box" />
+</svg>
+ +

{{EmbedLiveSample('topExample', '100%', 200)}}

+
+ +

Notes d'usage

+ + + + + + + + + + + + + + + + +
Valeur{{cssxref('url')}} | [ {{cssxref('basic-shape')}} || <geometry-box> ] | none
Valeur par défautnone
AnimationOui
+ +
+
<geometry-box>
+
une information supplémentaire pour dire comment une {{cssxref('basic-shape', 'forme CSS')}} est appliquée à un élément: fill-box indique d'utiliser la zone de sélection de l'objet ; stroke-box d'utiliser la zone de sélection de l'objet en prenant en plus le contour de l'élément; view-box d'utiliser le  document SVG parent.
+
+ +

Note: Pour plus d'informations sur la syntaxe de clip-path, voir la propriété CSS {{cssxref('clip-path')}}.

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.attributes.presentation.clip-path")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("CSS Masks", "#the-clip-path", 'clip-path')}}{{Spec2('CSS Masks')}}Étend son application aux éléments HTML. La propriété clip-path remplace la propriété {{cssxref("clip")}} dépréciée.
{{SpecName('SVG1.1', 'masking.html#ClipPathProperty', 'clip-path')}}{{Spec2('SVG1.1')}}Définition initiale (s'applique sur les éléments SVG uniquement).
diff --git a/files/fr/web/svg/attribute/color/index.html b/files/fr/web/svg/attribute/color/index.html new file mode 100644 index 0000000000..6d1fd5eb50 --- /dev/null +++ b/files/fr/web/svg/attribute/color/index.html @@ -0,0 +1,67 @@ +--- +title: color +slug: Web/SVG/Attribute/color +tags: + - SVG + - SVG Attribute +translation_of: Web/SVG/Attribute/color +--- +

{{SVGRef}}

+ +

L'attribut color est utilisé pour définir indirectement une valeur potentielle (currentColor) pour les attributs {{ SVGAttr("fill") }}, {{ SVGAttr("stroke") }}, {{ SvgAttr("stop-color") }}, {{ SVGAttr("flood-color") }} et {{ SVGAttr("lighting-color") }}.

+ +

color étant un attribut de présentation, il peut être utilisé comme propriété CSS. Voir {{ cssxref("color","CSS color") }} pour plus d'informations.

+ +

Contexte d'utilisation

+ + + + + + + + + + + + + + + + + + + + +
CatégoriesAttribut de présentation
Valeur<color> | inherit
AnimationYes
Document normatifSVG 1.1 (2nd Edition)
+ +

Exemple

+ +
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <g color="green">
+    <rect width="50" height="50" fill="currentColor" />
+    <circle r="25" cx="70" cy="70" stroke="currentColor" fill="none" stroke-width="5" />
+  </g>
+</svg>
+
+ +

{{ EmbedLiveSample('Exemple', '100%', '110') }}

+ +

Éléments

+ +

Les éléments suivants peuvent utiliser l'attribut color:

+ + + +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.attributes.presentation.color")}}

diff --git a/files/fr/web/svg/attribute/conditional_processing/index.html b/files/fr/web/svg/attribute/conditional_processing/index.html new file mode 100644 index 0000000000..ae04d7978f --- /dev/null +++ b/files/fr/web/svg/attribute/conditional_processing/index.html @@ -0,0 +1,38 @@ +--- +title: Attributs SVG de traitement conditionnel +slug: Web/SVG/Attribute/Conditional_Processing +translation_of: Web/SVG/Attribute/Conditional_Processing +--- +

Les attributs SVG de traitement conditionnel sont tous les attributs qui peuvent être spécifiés sur des éléments SVG pour contrôler si l'élément sur lequel il s'applique doit s'afficher ou non.

+ +
+ +
+ +

Attributs

+ +
+
{{SVGAttr('externalResourcesRequired')}} {{deprecated_inline('svg2')}}
+
Si sa valeur vaut true, cela indique que le navigateur doit attendre que toutes les ressources externes nécessaires au rendu de cet élément soient chargées avant de traiter l'élément associé.
+ Valeur: false|true; Animation: Non
+
{{SVGAttr('requiredExtensions')}}
+
Liste toutes les fonctionnalités devant être prises en charge par le navigateur pour autoriser l'affichage de l'élément associé.
+ Valeur: Une liste d'URI séparées par des espaces; Animation: Non
+
{{SVGAttr('requiredFeatures')}} {{deprecated_inline('svg2')}}
+
Liste toutes les fonctionnalités, telles que définies dans la spécification SVG 1.1, devant être prises en charge par le navigateur pour autoriser l'affichage de l'élément associé.
+ Valeur: Une list d'URI séparées par espaces; Animation: Non
+
{{SVGAttr('systemLanguage')}}
+
Indique la langue que l'utilisatteur doit avoir choisit pour autoriser l'affichage l'élément associé.
+ Valeur: Une liste d'ID de langage séparés par des virgules; Animation: Non
+
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.attributes.conditional_processing")}}

diff --git a/files/fr/web/svg/attribute/core/index.html b/files/fr/web/svg/attribute/core/index.html new file mode 100644 index 0000000000..71cbb6c3c1 --- /dev/null +++ b/files/fr/web/svg/attribute/core/index.html @@ -0,0 +1,67 @@ +--- +title: Attributs SVG de base +slug: Web/SVG/Attribute/Core +translation_of: Web/SVG/Attribute/Core +--- +

Les attributs SVG de base sont  tous les attributs communs pouvant être spécifiés sur n'importe quel élément SVG.

+ +
+ +
+ +

Attributs

+ +
+
{{SVGAttr('id')}}
+
Définit un identifiant (ID) qui doit être unique dans tout le document. Son but est d'identifier l'élément pour pouvoir y faire référence plus tard, comme identificateur de fragment, dans du code, ou pour appliquer du style (avec CSS).
+ Valuer: Tout ID valide; Animation: Non
+
{{SVGAttr('lang')}}
+
+

Définit le langage de l'élément  — la langue dans laquelle sont écrit les éléments non-éditables et celle dans laquelle devrait être écrits les éléments éditables. L'attribut prend pour valeur l'identifiant de la langue tel que définit dans le document IETF "Tags for Identifying Languages" (BCP47).

+ +
+

SVG 2 introduit l'attribut lang. Si les attributs lang et xml:lang sont tous les deux définis, xml:lang a la priorité sur lang.

+
+ +

Valeur: Tout ID de langage valide; Animation: Non

+
+
{{SVGAttr('tabindex')}}
+
L'attribut SVG tabindex permet de contrôler si un élément peut prendre le focus et définit l'ordre relatif des éléments pour la navigation via tabulation.
+ Type de valeur: <integer>; Animation: Non
+
{{SVGAttr('xml:base')}}
+
Spécifie une IRI de base autre que celle du document.
+ Type de valeur: <IRI>; Animation: Non
+
{{SVGAttr('xml:lang')}}
+
+

C'est un attribut universel autorisé dans tous les documents XML pour définir le langage du texte présent dans l'élément. Son utilisation est presque identique à celle de l'attribut lang en HTML, hormis que les documents XML 1.0 ne permettent pas l'utilisation d'une valeur d'attribut nulle (xml:lang="") pour indiquer un langage inconnu. À la place, utiliser xml:lang="und".

+ +
+

SVG 2 introduit l'attribut lang. Si les attributs lang et xml:lang sont tous les deux définis, xml:lang a la priorité sur lang.

+
+ +

Valeur: Tout ID de langage valide; Animation: Non

+
+
{{SVGAttr('xml:space')}} {{deprecated_inline('svg2')}}
+
+

SVG prend en charge l'attribut XML standard xml:space pour spécifier le traitement des caractères d'espaces dans les données d'un élément {{ SVGElement("text") }} donné.

+ +
+

Note: Plutôt qu'utiliser l'attribut xml:space vous devriez utiliser la propriété CSS {{cssxref('white-space')}} à la place.

+
+ +

Valeur: default | preserve; Animation: Non

+
+
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.attributes.core")}}

diff --git a/files/fr/web/svg/attribute/cx/index.html b/files/fr/web/svg/attribute/cx/index.html new file mode 100644 index 0000000000..bb97ab6341 --- /dev/null +++ b/files/fr/web/svg/attribute/cx/index.html @@ -0,0 +1,172 @@ +--- +title: cx +slug: Web/SVG/Attribute/cx +tags: + - SVG + - SVG Attribute +translation_of: Web/SVG/Attribute/cx +--- +

{{SVGRef}}

+ +

L'attribut cx définit la coordonnée de l'axe x pour le point central d'un élément.

+ +

Trois éléments utilisent cet attribut: {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, et {{SVGElement("radialGradient")}}

+ +
+ + +
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
+  <radialGradient cx="25%" id="myGradient">
+    <stop offset="0"    stop-color="white" />
+    <stop offset="100%" stop-color="black" />
+  </radialGradient>
+
+  <circle cx="50" cy="50" r="45"/>
+  <ellipse cx="150" cy="50" rx="45" ry="25" />
+  <rect x="205" y="5" width="90" height="90" fill="url(#myGradient)" />
+</svg>
+ +

{{EmbedLiveSample('topExample', 100, 100)}}

+
+ +

circle

+ +

Pour un élément {{SVGElement('circle')}}, cx définit la coordonnée x de son centre.

+ + + + + + + + + + + + + + + + +
Valeur<length> | <percentage>
Valeur par défaut0
AnimationOui
+ +

Note: À partir de SVG2, cx est une propriété de géométrie, ce qui signifie que cet attribut peut être utilisé comme propriété CSS pour les cercles.

+ +

ellipse

+ +

Pour un élément {{SVGElement('ellipse')}}, cx définit la coordonnées x de son centre.

+ + + + + + + + + + + + + + + + +
Valeur<length> | <percentage>
Valeur par défaut0
AnimationOui
+ +

Note: À partir de SVG2, cx est une propriété de géométrie, ce qui signifie que cet attribut peut être utilisé comme propriété CSS pour les ellipses.

+ +

radialGradient

+ +

Pour un élément {{SVGElement('radialGradient')}}, cx définit la coordonnées x du plus grand cercle pour le dégradé radial (c'est-à-dire du plus externe). Le dégradé sera dessiné de telle façon que la limite du dégradé à 100% corresponde au périmètre de ce plus grand cercle.

+ + + + + + + + + + + + + + + + +
Valeur<length>
Valeur par défaut50%
AnimationOui
+ +

Exemple

+ + + +
<svg viewBox="0 0 34 10" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <radialGradient cx="0" id="myGradient000">
+      <stop offset="0%"   stop-color="gold" />
+      <stop offset="50%"  stop-color="green" />
+      <stop offset="100%" stop-color="white" />
+    </radialGradient>
+
+    <radialGradient cx="50%" id="myGradient050">
+      <stop offset="0%"   stop-color="gold" />
+      <stop offset="50%"  stop-color="green" />
+      <stop offset="100%" stop-color="white" />
+    </radialGradient>
+
+    <radialGradient cx="100%" id="myGradient100">
+      <stop offset="0%"   stop-color="gold" />
+      <stop offset="50%"  stop-color="green" />
+      <stop offset="100%" stop-color="white" />
+    </radialGradient>
+  </defs>
+
+  <rect x="1"  y="1" width="8" height="8" fill="url(#myGradient000)" stroke="black" />
+  <rect x="13" y="1" width="8" height="8" fill="url(#myGradient050)" stroke="black" />
+  <rect x="25" y="1" width="8" height="8" fill="url(#myGradient100)" stroke="black" />
+</svg>
+ +

{{EmbedLiveSample('radialGradient', 150, '100%')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("SVG2", "geometry.html#CX", "cx")}}{{Spec2("SVG2")}}Définition comme propriété de géométrie
{{SpecName("SVG2", "pservers.html#RadialGradientElementCXAttribute", "cx")}}{{Spec2("SVG2")}}Définition pour SVG2
{{SpecName("SVG1.1", "pservers.html#RadialGradientElementCXAttribute", "cx")}}{{Spec2("SVG1.1")}}Définition initiale pour <radialGradient>
{{SpecName("SVG1.1", "shapes.html#EllipseElementCXAttribute", "cx")}}{{Spec2("SVG1.1")}}Définition initiale pour <ellipse>
{{SpecName("SVG1.1", "shapes.html#CircleElementCXAttribute", "cx")}}{{Spec2("SVG1.1")}}Définition initiale pour <circle>
diff --git a/files/fr/web/svg/attribute/cy/index.html b/files/fr/web/svg/attribute/cy/index.html new file mode 100644 index 0000000000..041e7bcdfd --- /dev/null +++ b/files/fr/web/svg/attribute/cy/index.html @@ -0,0 +1,172 @@ +--- +title: cy +slug: Web/SVG/Attribute/cy +tags: + - SVG + - SVG Attribute +translation_of: Web/SVG/Attribute/cy +--- +
{{SVGRef}}
+ +

L'attribut cy définit la coordonnée de l'axe y pour le point central d'un élément.

+ +

Trois éléments utilisent cet attribut: {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, et {{SVGElement("radialGradient")}}

+ +
+ + +
<svg viewBox="0 0 100 300" xmlns="http://www.w3.org/2000/svg">
+  <radialGradient cy="25%" id="myGradient">
+    <stop offset="0"    stop-color="white" />
+    <stop offset="100%" stop-color="black" />
+  </radialGradient>
+
+  <circle  cy="50"  cx="50" r="45"/>
+  <ellipse cy="150" cx="50" rx="45" ry="25" />
+  <rect x="5" y="205" width="90" height="90" fill="url(#myGradient)" />
+</svg>
+ +

{{EmbedLiveSample('topExample', '100%', 300)}}

+
+ +

circle

+ +

Pour un élément {{SVGElement('circle')}}, cy définit la coordonnée y de son centre.

+ + + + + + + + + + + + + + + + +
Valeur<length> | <percentage>
Valeur par défaut0
AnimationOui
+ +

Note: À partir de SVG2, cy est une propriété de géométrie, ce qui signifie que cet attribut peut être utilisé comme propriété CSS pour les cercles.

+ +

ellipse

+ +

Pour un élément {{SVGElement('ellipse')}}, cy définit la coordonnée y de son centre.

+ + + + + + + + + + + + + + + + +
Valeur<length> | <percentage>
Valeur par défaut0
AnimationOui
+ +

Note: À partir de SVG2, cy est une propriété de géométrie, ce qui signifie que cet attribut peut être utilisé comme propriété CSS pour les ellipses.

+ +

radialGradient

+ +

Pour un élément {{SVGElement('radialGradient')}}, cy définit la coordonnées x du plus grand cercle pour le dégradé radial (c'est-à-dire du plus externe). Le dégradé sera dessiné de telle façon que la limite de dégradé de 100% corresponde au périmètre de ce plus grand cercle.

+ + + + + + + + + + + + + + + + +
Valeur<length>
Valeur par défaut50%
AnimationOui
+ +

Exemple

+ + + +
<svg viewBox="0 0 34 10" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <radialGradient cy="0" id="myGradient000">
+      <stop offset="0%"   stop-color="gold" />
+      <stop offset="50%"  stop-color="green" />
+      <stop offset="100%" stop-color="white" />
+    </radialGradient>
+
+    <radialGradient cy="50%" id="myGradient050">
+      <stop offset="0%"   stop-color="gold" />
+      <stop offset="50%"  stop-color="green" />
+      <stop offset="100%" stop-color="white" />
+    </radialGradient>
+
+    <radialGradient cy="100%" id="myGradient100">
+      <stop offset="0%"   stop-color="gold" />
+      <stop offset="50%"  stop-color="green" />
+      <stop offset="100%" stop-color="white" />
+    </radialGradient>
+  </defs>
+
+  <rect x="1"  y="1" width="8" height="8" fill="url(#myGradient000)" stroke="black" />
+  <rect x="13" y="1" width="8" height="8" fill="url(#myGradient050)" stroke="black" />
+  <rect x="25" y="1" width="8" height="8" fill="url(#myGradient100)" stroke="black" />
+</svg>
+ +

{{EmbedLiveSample('radialGradient', 150, '100%')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("SVG2", "geometry.html#CY", "cy")}}{{Spec2("SVG2")}}Définition comme propriété de géométrie
{{SpecName("SVG2", "pservers.html#RadialGradientElementCYAttribute", "cy")}}{{Spec2("SVG2")}}Définition pour SVG2
{{SpecName("SVG1.1", "pservers.html#RadialGradientElementCYAttribute", "cy")}}{{Spec2("SVG1.1")}}Définition initiale pour <radialGradient>
{{SpecName("SVG1.1", "shapes.html#EllipseElementCYAttribute", "cy")}}{{Spec2("SVG1.1")}}Définition initiale pour <ellipse>
{{SpecName("SVG1.1", "shapes.html#CircleElementCYAttribute", "cy")}}{{Spec2("SVG1.1")}}Définition initiale pour <circle>
diff --git a/files/fr/web/svg/attribute/d/index.html b/files/fr/web/svg/attribute/d/index.html new file mode 100644 index 0000000000..7aad4f3a04 --- /dev/null +++ b/files/fr/web/svg/attribute/d/index.html @@ -0,0 +1,196 @@ +--- +title: d +slug: Web/SVG/Attribute/d +tags: + - Attribut SVG + - SVG +translation_of: Web/SVG/Attribute/d +--- +
{{SVGRef}}
+ +

L'attribut d définit un tracé à dessiner.

+ +

La définition d'un tracé est une liste de commandes de tracé où chaque commande est composée d'une lettre pour la commande, et de nombres qui représentent les paramètres de la commande. Les commandes sont détaillées ci-dessous.

+ +

Trois éléments ont cet attribut : {{SVGElement("path")}}, {{SVGElement("glyph")}}, and {{SVGElement("missing-glyph")}}

+ +
+ + +
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <path fill="none" stroke="red"
+    d="M 10,30
+       A 20, 20 0, 0, 1 50, 30
+       A 20, 20 0, 0, 1 90, 30
+       Q 90, 60 50, 90
+       Q 10, 60 10, 30 z" />
+</svg>
+ +

{{EmbedLiveSample('Example', '100%', 200)}}

+ +

Tracé

+ +

Pour un {{SVGElement('path')}}, d est une chaîne de caractère qui contient une série de commandes de tracé qui définissent le tracé à dessiner.

+ + + + + + + + + + + + + + + + +
Valeur<string>
Valeur par défautaucune
AnimableOui
+ +

glyph

+ +

Attention : Depuis SVG2, {{SVGElement('glyph')}} est dépréciée et ne doit plus être utilisé.

+ +

Pour un {{SVGElement('glyph')}}, d est une chaîne de caractères qui contient une série de commandes de tracé qui définissent la forme du contour de la glyphe.

+ + + + + + + + + + + + + + + + +
Valeur<string>
Valeur par défautaucune
AnimableOui
+ +

Note : Le point d'origine (coordonnée 0,0) est généralement le point du coin en haut à gauche du context. Néanmoins, l'élément {{SVGElement("glyph")}} a son point d'origine dans le coin en bas à gauche de son enveloppe.

+ +

missing-glyph

+ +

Attention : Depuis SVG2, {{SVGElement('missing-glyph')}} est dépréciée et ne doit plus être utilisé.

+ +

Pour un {{SVGElement('missing-glyph')}}, d est une chaîne de caractères qui contient une série de commandes de tracé qui définissent la forme du contour de la glyphe.

+ + + + + + + + + + + + + + + + +
Valeur<string>
Valeur par défautaucune
AnimableOui
+ +

Commandes de tracé

+ +

Les commandes de tracé sont des instructions qui définissent un tracé à dessiner. Chaque commande est composée d'une lettre de commande et de nombres qui représentent les paramètres de la commande.

+ +

SVG définit 6 types de commandes, pour un total de 20 commandes :

+ + + +

Note: Les commandes sont sensibles à la casse; une commande en majuscule attend des positions absolues en arguments, alors qu'une commande en minuscule attend des points relatifs à la position actuelle du point.

+ +

Il est toujours possible de spécifier une valeur négative en argument d'une commande : des angles négatifs pointeront dans une direction vers le sens inverse des aiguilles d'une montre; des positions x et y seront interprétées commandes coordonnées négatives; des valeurs x négatives se déplaceront vers la gauche; et des valeurs y négatives se déplaceront vers le haut.

+ +

Moveto (aller à)

+ +

Cette instuction peut être vue comme un déplacement du pinceau à une position donnée sans rien tracer. Une bonne pratique consiste à commencer tous ses chemins par une instruction Moveto car, sans un positionnement initial, les instructions du chemin commencerons à un point quelconque ce qui peut donner des résultats non désirés.

+ +

Syntaxe:

+ + + +

Exemples :

+ + + +

Lineto (tracer une ligne jusqu'à)

+ +

À l'opposé de l'instruction Moveto, Lineto trace réellement une ligne de la position courante à la position définie. La syntaxe générique est L x, y ou l dx, dy avec x, y des coordonnées absolues et dx, dy des distances relatives au point courant, respectivement dans les sens de gauche à droite pour dx et de haut en bas pour dy.

+ +

Il existe aussi des raccourcis pour définir des lignes horizontales (H) ou verticales (V). Leur syntaxe est similaire à celle de L, mais il n'y a qu'une valeur à donner.

+ +

Exemples :

+ + + +

Curveto

+ +

L'instruction Curveto trace une courbe de Bézier. Il existe deux types de courbes de Bézier : cubique et quadratique. Les courbes cubiques sont un cas particulier des courbes quadratiques puisque le point de contrôle est commun au point de départ et au point d'arrivée. La syntaxe d'une courbe quadratique de Bézier est "Q cx,cy x,y" ou "q dcx,dcy dx,dy". cx et cy sont les coordonnées absolues du point de contrôle tandis que dcx et dcy sont les coordonnées du point de contrôle relatives au point courant. x et y sont les coordonnées absolues du point d'arrivée tandis que dx et dy sont les coordonnées relatives de ce point par rapport au point courant.

+ +

Les courbes cubiques de Bézier suivent le même principe mais avec deux points de contrôle. La syntaxe de ces courbes est C c1x, c1y c2x, c2y x, y ou c dc1x, dc1y dc2x, dc2y dx, dy.

+ +
+ + +

Pour réaliser des chaînes de courbes de Bézier "adoucies", il est possible d'utiliser les commandes T et S. Leur syntaxe est plus simple que les autres commandes Curveto car elles estiment que le premier point de contrôle est le symétrique du point de contrôle précédent par rapport au point terminal de la courbe précédente, ou que c'est le point précédent lui-même s'il n'y a pas eu de courbe tracée directement avant. La syntaxe de T est T x, y ou t dx, dy pour un point d'arrivée de position absolue ou relatives et sert à créer des courbes quadratiques de Bézier. S sert donc à faire des courbes cubiques de Bézier avec la syntaxe S cx, cy x, y ou s dcx,dcy dx,dy, où (d)cx indique le second point de contrôle.

+ +

Finalement, toutes les commandes de courbes de Bézier peuvent servir de "polybézier" en spécifiant tous les paramètres successivement après la commande initiale. En conséquence, les deux commandes suivantes sont équivalentes en résultat :

+ +
+

<path d="c 50, 0 50, 100 100, 100 50, 0 50, -100 100, -100" />
+ <path d="c 50, 0 50, 100 100, 100 c 50, 0 50, -100 100, -100" />

+
+ +

Arcto

+ +

Parfois il est plus simple de définir un path comme une courbe elliptique plutôt que comme une courbe de Bézier. Dans cette optique, les commandes Arcto sont supportées par les balises path.

+ +

La définition d'un Arcto est relativement complexe : A rx, ry xAxisRotate LargeArcFlag, SweepFlag x, y, où rx et ry représentent les rayons sur les axes x et y, respectivement ; LargeArcFlag est une valeur à 0 ou 1, et permet de déterminer si le plus petit (0) ou le plus grand (1) arc possible doit être dessiné ; SweepFlag est une valeur à 0 ou 1 et définit le sens de balayage de la courbe : horaire (1) ou anti-horaire (0) ; et enfin x et y sont les coordonnées de destination.

+ +

La propriété xAxisRotate est censée changer l'axe des x relativement au viewport de référence. Cependant, il semble que cette propriété n'ait aucun effet avec le moteur de rendu Gecko 7.

+ +

ClosePath (fermer un chemin)

+ +

L'instruction ClosePath trace simplement une ligne droite de la position actuelle jusqu'au point initial de la courbe. C'est l'instruction la plus simple puisqu'elle n'attend aucun argument. Il n'y a pas de différence entre la version majuscule ("Z") et la version minuscule ("z").

+
+ +

Éléments

+ +

Les éléments suivants peuvent utiliser l'attribut d :

+ + + +

De plus, les mêmes règles s'appliquent aux animations de chemin {{SVGElement("animate")}}.

+ +

Notes

+ +

Le point d'origine (de coordonnées 0,0) est habituellement le coin supérieur gauche du contexte. Cependant, l'élément {{SVGElement("glyph")}} a son origine dans le coin inférieur gauche de la boîte contenant son caractère.

+
diff --git a/files/fr/web/svg/attribute/dx/index.html b/files/fr/web/svg/attribute/dx/index.html new file mode 100644 index 0000000000..436b6dbd85 --- /dev/null +++ b/files/fr/web/svg/attribute/dx/index.html @@ -0,0 +1,294 @@ +--- +title: dx +slug: Web/SVG/Attribute/dx +tags: + - SVG + - SVG Attribute +translation_of: Web/SVG/Attribute/dx +--- +
{{SVGRef}}
+ +

L'attribut dx indique un décalage sur l'axe x de la position d'un élément ou de son contenu.

+ +

Sept éléments utilisent cet attribut: {{SVGElement('altGlyph')}}, {{SVGElement('feDropShadow')}}, {{SVGElement('feOffset')}}, {{SVGElement('glyphRef')}}, {{SVGElement('text')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}

+ +
+ + +
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <!-- Lignes indiquant la position des glyphes -->
+  <line x1="0"  x2="100%" y1="50%" y2="50%" />
+  <line x1="10%" x2="10%" y1="0"   y2="100%" />
+  <line x1="60%" x2="60%" y1="0"   y2="100%" />
+
+  <!-- Un texte de référence -->
+  <text x="10%" y="50%" fill="grey">SVG</text>
+
+  <!-- Le même texte avec un décalage sur l'axe x -->
+  <text dx="50%" x="10%" y="50%">SVG</text>
+</svg>
+ +
line {
+  stroke: red;
+  stroke-width: .5px;
+  stroke-dasharray: 3px;
+}
+ +

{{EmbedLiveSample('topExample', '100%', 200)}}

+
+ +

altGlyph

+ +

Attention: Depuis SVG2 {{SVGElement('altGlyph')}} est déprécié et ne devrait pas être utilisé.

+ +

Pour {{SVGElement('altGlyph')}}, s'il ne contient qu'une seule valeur, dx définit un décalage sur l'axe x pour l'ensemble des glyphes.

+ +

S'il a plusieurs valeurs, dx définit un décalage sur l'axe x individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent une valeur de 0. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs supplémentaires sont ignorées.

+ + + + + + + + + + + + + + + + +
ValeurListe de <length>
Valeur par défautaucune
AnimationOui
+ +

feDropShadow

+ +

Pour {{SVGElement('feDropShadow')}}, dx définit le décalage x de l'ombre portée. L'unité utilisée pour résoudre la valeur de l'attribut est définie par l'attribut {{SVGAttr('primitiveUnits')}} de l'élément {{SVGElement('filter')}}.

+ + + + + + + + + + + + + + + + +
Valeur<number>
Valeur par défaut2
AnimationOui
+ +

feOffset

+ +

Pour {{SVGElement('feOffset')}}, dx définit le décalage x de l'élément source du filtre. L'unité utilisée pour résoudre la valeur de l'attribut est définie par l'attribut {{SVGAttr('primitiveUnits')}} de l'élément {{SVGElement('filter')}}.

+ + + + + + + + + + + + + + + + +
Valeur<number>
Valeur par défaut0
AnimationOui
+ +

glyphRef

+ +

Attention: Depuis SVG2 {{SVGElement('glyphRef')}} est déprécié et ne devrait pas être utilisé.

+ +

Pour {{SVGElement('glyphRef')}}, dx définit le décalage x du glyphe, dans le système métrique de la police.

+ + + + + + + + + + + + + + + + +
Valeur<number>
Valeur par défaut0
AnimationOui
+ +

text

+ +

Pour {{SVGElement('text')}}, s'il ne contient qu'une seule valeur, dx définit un décalage sur l'axe x pour tous les glyphes.

+ +

S'il a plusieurs valeurs, dx définit un décalage sur l'axe x individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent une valeur de 0. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs supplémentaires sont ignorées.

+ + + + + + + + + + + + + + + + +
ValeurListe de <length>
Valeur par défautaucune
AnimationOui
+ +

Exemple

+ + + +
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <!-- Linges indiquant la position des glyphes -->
+  <line x1="0"  x2="100%" y1="25%" y2="25%" />
+  <line x1="0"  x2="100%" y1="50%" y2="50%" />
+  <line x1="0"  x2="100%" y1="75%" y2="75%" />
+
+  <line x1="10%" x2="10%" y1="0"   y2="100%" />
+  <line x1="30%" x2="30%" y1="0"   y2="100%" />
+  <line x1="60%" x2="60%" y1="0"   y2="100%" />
+
+  <!-- Le comportement change en fonction du nombre
+       de valeurs de l'attribut -->
+  <text dx="20%"       x="10%" y="25%">SVG</text>
+  <text dx="0 10%"     x="10%" y="50%">SVG</text>
+  <text dx="0 10% 20%" x="10%" y="75%">SVG</text>
+</svg>
+ +
line {
+  stroke: red;
+  stroke-width: .5px;
+  stroke-dasharray: 3px;
+}
+ +

{{EmbedLiveSample('text', '100%', 100)}}

+ +

tref

+ +

Attention: Depuis SVG2 {{SVGElement('tref')}} est déprécié et ne devrait pas être utilisé.

+ +

 

+ +

Pour {{SVGElement('tref')}}, s'il ne contient qu'une seule valeur, dx définit un décalage sur l'axe x pour tous les glyphes.

+ +

S'il a plusieurs valeurs, dx définit un décalage sur l'axe x individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent une valeur de 0. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs supplémentaires sont ignorées.

+ +

 

+ + + + + + + + + + + + + + + + +
ValeurListe de <length>
Valeur par défautaucune
AnimationOui
+ +

tspan

+ +

 

+ +

Pour {{SVGElement('tspan')}}, s'il ne contient qu'une seule valeur, dx définit un décalage sur l'axe x pour tous les glyphes.

+ +

S'il a plusieurs valeurs, dx définit un décalage sur l'axe x individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent une valeur de 0. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs supplémentaires sont ignorées.

+ +

 

+ + + + + + + + + + + + + + + + +
ValeurListe de <length>
Valeur par défautaucune
AnimationOui
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{ SpecName('Filters 1.0', '#element-attrdef-fedropshadow-dx', 'dx') }}{{Spec2('Filters 1.0')}}Définition initiale pour <feDropShadow>
{{ SpecName('Filters 1.0', '#element-attrdef-feoffset-dx', 'dx') }}{{Spec2('Filters 1.0')}}Définition pour <feOffset>
{{SpecName("SVG2", "text.html#TextElementDXAttribute", "dx")}}{{Spec2("SVG2")}}Définition pour <text> et <tspan>
{{SpecName("SVG1.1", "filters.html#feOffsetDxAttribute", "dx")}}{{Spec2("SVG1.1")}}Définition initiale pour <feOffset>
{{SpecName("SVG1.1", "text.html#AltGlyphElementDXAttribute", "dx")}}{{Spec2("SVG1.1")}}Définition initiale pour <altGlyph>
{{SpecName("SVG1.1", "text.html#GlyphRefElementDXAttribute", "dx")}}{{Spec2("SVG1.1")}}Définition initiale pour <glyphRef>
{{SpecName("SVG1.1", "text.html#TextElementDXAttribute", "dx")}}{{Spec2("SVG1.1")}}Définition initiale pour <text>
{{SpecName("SVG1.1", "text.html#TSpanElementDXAttribute", "dx")}}{{Spec2("SVG1.1")}}Définition initiale pour <tref> et <tspan>
diff --git a/files/fr/web/svg/attribute/dy/index.html b/files/fr/web/svg/attribute/dy/index.html new file mode 100644 index 0000000000..2dd91bf46e --- /dev/null +++ b/files/fr/web/svg/attribute/dy/index.html @@ -0,0 +1,297 @@ +--- +title: dy +slug: Web/SVG/Attribute/dy +tags: + - SVG + - SVG Attribute +translation_of: Web/SVG/Attribute/dy +--- +
{{SVGRef}}
+ +

L'attribut dy indique un décalage sur l'axe y de la position d'un élément ou de son contenu.

+ +

Sept éléments utilisent cet attribut: {{SVGElement('altGlyph')}}, {{SVGElement('feDropShadow')}}, {{SVGElement('feOffset')}}, {{SVGElement('glyphRef')}}, {{SVGElement('text')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}

+ +
+ + +
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <!-- Lignes indiquant la position des glyphes -->
+  <line x1="10%" x2="10%"  y1="0"   y2="100%" />
+  <line x1="0"   x2="100%" y1="30%" y2="30%"  />
+  <line x1="0"   x2="100%" y1="80%" y2="80%"  />
+
+  <!-- Un texte de référence -->
+  <text x="10%" y="30%" fill="grey">SVG</text>
+
+  <!-- Le même texte avec un décalage sur l'axe y -->
+  <text dy="50%" x="10%" y="30%">SVG</text>
+</svg>
+ +
line {
+  stroke: red;
+  stroke-width: .5px;
+  stroke-dasharray: 3px;
+}
+ +

{{EmbedLiveSample('topExample', '100%', 200)}}

+
+ +

altGlyph

+ +

Attention: Depuis {{SVGElement('altGlyph')}} est déprécié et ne devrait pas être utilisé.

+ +

Pour {{SVGElement('altGlyph')}}, s'il ne contient qu'une seule valeur, dy définit un décalge sur l'axe y pour tous les glyphes.

+ +

S'il a plusieurs valeurs, dy définit un décalage sur l'axe y individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent la valeur 0. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs restantes sont ignorées.

+ + + + + + + + + + + + + + + + +
ValeurListe de <length>
Valeur par défautaucune
AnimationOui
+ +

feDropShadow

+ +

Pour {{SVGElement('feDropShadow')}}, dy définit le décalage x de l'ombre portée. L'unité utilisée pour résoudre la valeur est définie par l'attribut {{SVGAttr('primitiveUnits')}} de l'élément {{SVGElement('filter')}}.

+ + + + + + + + + + + + + + + + +
Valeur<number>
Valeur par défaut2
AnimationOui
+ +

feOffset

+ +

Pour {{SVGElement('feOffset')}}, dy définit le décalage x de l'élément source du filtre. L'unité utilisée pour résoudre la valeur est définie par l'attribut {{SVGAttr('primitiveUnits')}} de l'élément {{SVGElement('filter')}}.

+ + + + + + + + + + + + + + + + +
Valeur<number>
Valeur par défaut0
AnimationOui
+ +

glyphRef

+ +

Attention: Depuis SVG2 {{SVGElement('glyphRef')}} est déprécié et ne devrait pas être utilisé.

+ +

Pour {{SVGElement('glyphRef')}}, dy définit le décalage x du glyphe, dans le système métrique de la police.

+ + + + + + + + + + + + + + + + +
Valeur<number>
Valeur par défaut0
AnimationOui
+ +

text

+ +

Pour {{SVGElement('text')}}, s'il ne contient qu'une seule valeur, dx définit un décalage sur l'axe x pour tous les glyphes.

+ +

S'il a plusieurs valeurs, dx définit un décalage sur l'axe x individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent une valeur de 0. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs supplémentaires sont ignorées.

+ +

 

+ + + + + + + + + + + + + + + + +
ValeurListe de <length>
Valeur par défautaucune
AnimationOui
+ +

Exemple

+ + + +
<svg viewBox="0 0 150 100" xmlns="http://www.w3.org/2000/svg">
+  <!-- Lignes horizontales -->
+  <line x1="0" x2="100%" y1="30" y2="30" />
+  <line x1="0" x2="100%" y1="40" y2="40" />
+  <line x1="0" x2="100%" y1="50" y2="50" />
+  <line x1="0" x2="100%" y1="60" y2="60" />
+
+  <!-- Lignes verticales -->
+  <line x1="10" x2="10" y1="0" y2="100%" />
+  <line x1="50" x2="50" y1="0" y2="100%" />
+  <line x1="90" x2="90" y1="0" y2="100%" />
+
+  <!-- Le comportement change en fonction du nombre de valeurs de l'attribut -->
+  <text dy="20"      x="10" y="30">SVG</text>
+  <text dy="0 10"    x="50" y="30">SVG</text>
+  <text dy="0 10 20" x="90" y="30">SVG</text>
+</svg>
+ +
line {
+  stroke: red;
+  stroke-width: .5px;
+  stroke-dasharray: 3px;
+}
+ +

{{EmbedLiveSample('text', '100%', 100)}}

+ +

tref

+ +

Attention: Depuis SVG2 {{SVGElement('tref')}} est déprécié et ne devrait pas être utilisé.

+ +

 

+ +

Pour {{SVGElement('tref')}}, s'il ne contient qu'une seule valeur, dx définit un décalage sur l'axe x pour tous les glyphes.

+ +

S'il a plusieurs valeurs, dx définit un décalage sur l'axe x individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent une valeur de 0. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs supplémentaires sont ignorées.

+ +

 

+ + + + + + + + + + + + + + + + +
ValeurListe de <length>
Valeur par défautaucune
AnimationOui
+ +

tspan

+ +

 

+ +

Pour {{SVGElement('tspan')}}, s'il ne contient qu'une seule valeur, dx définit un décalage sur l'axe x pour tous les glyphes.

+ +

S'il a plusieurs valeurs, dx définit un décalage sur l'axe x individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent une valeur de 0. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs supplémentaires sont ignorées.

+ +

 

+ + + + + + + + + + + + + + + + +
ValeurListe de <length>
Valeur par défautaucune
AnimationOui
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{ SpecName('Filters 1.0', '#element-attrdef-fedropshadow-dy', 'dy') }}{{Spec2('Filters 1.0')}}Définition initiale pour <feDropShadow>
{{ SpecName('Filters 1.0', '#element-attrdef-feoffset-dy', 'dy') }}{{Spec2('Filters 1.0')}}Définition pour <feOffset>
{{SpecName("SVG2", "text.html#TextElementDYAttribute", "dy")}}{{Spec2("SVG2")}}Définition pour <text> et <tspan>
{{SpecName("SVG1.1", "filters.html#feOffsetDyAttribute", "dy")}}{{Spec2("SVG1.1")}}Définition initiale pour <feOffset>
{{SpecName("SVG1.1", "text.html#AltGlyphElementDYAttribute", "dy")}}{{Spec2("SVG1.1")}}Définition initiale pour <altGlyph>
{{SpecName("SVG1.1", "text.html#GlyphRefElementDYAttribute", "dy")}}{{Spec2("SVG1.1")}}Définition initiale pour <glyphRef>
{{SpecName("SVG1.1", "text.html#TextElementDYAttribute", "dy")}}{{Spec2("SVG1.1")}}Définition initiale pour <text>
{{SpecName("SVG1.1", "text.html#TSpanElementDYAttribute", "dy")}}{{Spec2("SVG1.1")}}Définition initiale pour <tref> et <tspan>
diff --git a/files/fr/web/svg/attribute/events/index.html b/files/fr/web/svg/attribute/events/index.html new file mode 100644 index 0000000000..0c1faf098d --- /dev/null +++ b/files/fr/web/svg/attribute/events/index.html @@ -0,0 +1,43 @@ +--- +title: Attributs d'événements des SVG +slug: Web/SVG/Attribute/Events +tags: + - Event + - SVG +translation_of: Web/SVG/Attribute/Events +--- +

Tout attribut d'événement a un nom qui commence par "on" suivit du nom de l'événement auquel il est rattaché. Ces attributs spécifient quel script exécuter lorsque l'événement du type donné est déclenché sur l'élément.

+ +

SVG prend en charge tous les types d'événement pris en charge par le navigateur, en suivant les mêmes spécifications que les attributs d'événement HTML.

+ +

Les attributs d'événements globaux sont disponibles sur tous les éléments SVG. Les autres attributs d'événement sont disponible au cas par cas sur les différents éléments.

+ +

Tous les attributs d'événements ne peuvent pas être animés.

+ +

Attributs

+ +

Attributs d'événement d'animation

+ +

onbegin, onend, onrepeat

+ +

Attributs d'événement du document

+ +

onabort, onerror, onresize, onscroll, onunload

+ +

Attributs d'événement des éléments du document

+ +

oncopy, oncut, onpaste

+ +

Attributs d'événement globaux

+ +

oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting

+ +

Attributs d'événement graphiques

+ +

onactivate, onfocusin, onfocusout

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.attributes.events")}}

diff --git a/files/fr/web/svg/attribute/fill-opacity/index.html b/files/fr/web/svg/attribute/fill-opacity/index.html new file mode 100644 index 0000000000..3991e07b5d --- /dev/null +++ b/files/fr/web/svg/attribute/fill-opacity/index.html @@ -0,0 +1,91 @@ +--- +title: fill-opacity +slug: Web/SVG/Attribute/fill-opacity +tags: + - SVG + - SVG Attribute +translation_of: Web/SVG/Attribute/fill-opacity +--- +
{{SVGRef}}
+ +

L'attribut fill-opacity définit l'opacité du remplissage (couleur, dégradé, motif, etc) appliqué à une forme.

+ +

Note: fill-opacity étant un attribut de présentation, il peut être utilisé comme propriété CSS.

+ +

Cet attribut peut être appliqué sur tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}

+ +
+ + +
<svg viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg">
+  <!-- Opacité par défaut: 1 -->
+  <circle cx="50" cy="50" r="40" />
+
+  <!-- Définit l'opacité avec un nombre -->
+  <circle cx="150" cy="50" r="40"
+          fill-opacity="0.7" />
+
+  <!-- Définit l'opaité avec un pourcentage -->
+  <circle cx="250" cy="50" r="40"
+          fill-opacity="50%" />
+
+  <!-- Définit l'opacité avec une propriété CSS -->
+  <circle cx="350" cy="50" r="40"
+          style="fill-opacity: .25;" />
+</svg>
+ +

{{EmbedLiveSample('topExample', '100%', 150)}}

+
+ +

Notes d'utilisation

+ + + + + + + + + + + + + + + + +
Valeur[0-1] | <percentage>
Valeur par défaut1
AnimationOui
+ +

Note: SVG2 introduit les valeurs en pourcentage pour fill-opacity. Cependant,  ce n'est pas souvent pris en charge pour le moment (Voir {{anch('Compatibilité des navigateurs')}} ci-dessous). Il est par conséquent recommandé d'utiiser les valeurs de l'intervalle [0-1].

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.attributes.presentation.fill-opacity")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("SVG2", "painting.html#FillOpacityProperty", "fill-opacity")}}{{Spec2("SVG2")}}Définition pour les formes et le texte.
{{SpecName("SVG1.1", "painting.html#FillOpacityProperty", "fill-opacity")}}{{Spec2("SVG1.1")}}Définition initiale pour les formes et le texte.
diff --git a/files/fr/web/svg/attribute/fill-rule/index.html b/files/fr/web/svg/attribute/fill-rule/index.html new file mode 100644 index 0000000000..ad3b269fa8 --- /dev/null +++ b/files/fr/web/svg/attribute/fill-rule/index.html @@ -0,0 +1,166 @@ +--- +title: fill-rule +slug: Web/SVG/Attribute/fill-rule +tags: + - SVG + - SVG Attribute +translation_of: Web/SVG/Attribute/fill-rule +--- +
{{SVGRef}}
+ +

L'attribut fill-rule définit l'algorithme à utiliser pour déterminer les parties qui sont considérées à l'intérieur de la forme.

+ +

Note: fill-rule est un attribut de présentation et peut donc être utilisé comme propriété CSS.

+ +

Cet attribut peut être appliqué à n'importe quel élément mais n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}

+ +
+ + +
<svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg">
+  <!-- Valeur par défaut pour fill-rule -->
+  <polygon fill-rule="nonzero" stroke="red"
+   points="50,0 21,90 98,35 2,35 79,90"/>
+
+  <!--
+  Les points au centre de la forme ont 2
+  segments (matérialisés par le trait rouge)
+  Avec la règle evenodd, ils sont considérés en
+  dehors de la forme, et l'intérieur de l'étoile
+  est donc vide.
+  -->
+  <polygon fill-rule="evenodd" stroke="red"
+   points="150,0 121,90 198,35 102,35 179,90"/>
+</svg>
+
+ +

{{EmbedLiveSample('topExample', '100%', 200)}}

+ +

Usage

+ + + + + + + + + + + + + + + + +
Valeurnonzero | evenodd
Valeur par défautnonzero
AnimationYes
+ +

L'attribut fill-rule peut prendre deux valeurs:

+ +

nonzero

+ +

La valeur nonzero détermine si un point est à l'intérieur d'une forme en dessinant un rayon à partir de ce point vers l'infini dans toutes les directions, puis examine les endroits où un segment de la forme traverse le rayon.

+ +

À chaque fois qu'un segment traverse le rayon de gauche à droite, on ajoute un. À chaque fois qu'un segment traverse le rayon de droite à gauche, on soustrait un. Si au final, le compte est égal à zéro, le point est l'extérieur. Dans le cas contraire, il est à l'intérieur.

+ +

Exemple

+ + + +
<svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg">
+  <!-- Effet de la règle de remplissage sur les segments qui se croisent -->
+  <polygon fill-rule="nonzero" stroke="red"
+           points="50,0 21,90 98,35 2,35 79,90"/>
+
+  <!--
+  Effet sur une forme dans une forme
+  lorsque le segment va dans la même direction
+  (vers la droite)
+  -->
+  <path fill-rule="nonzero" stroke="red"
+        d="M110,0  h90 v90 h-90 z
+           M130,20 h50 v50 h-50 z"/>
+
+  <!--
+  Effet sur une forme dans une forme
+  lorsque le segment va dans la direction opposée
+  (vers la gauche contre vers la droite)
+  -->
+  <path fill-rule="nonzero" stroke="red"
+        d="M210,0  h90 v90 h-90 z
+           M230,20 v50 h50 v-50 z"/>
+</svg>
+ +

{{EmbedLiveSample('nonzero', '100%', 200)}}

+ +

evenodd

+ +

La valeur evenodd détermine si un point est à l'intérieur d'une forme en dessinant un rayon de à partir de ce point vers l'infini dans toutes les directions, et compte le nombre de segments de la forme qui traversent ce rayon. Si ce nombre est impair (odd en anglais), alors le point est à l'intérieur. Si le nombre est pair (even en anglais), alors le point est à l'extérieur.

+ +

Exemple

+ + + +
<svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg">
+  <!-- Effet de la règle de remplissage sur les segments qui se croisent -->
+  <polygon fill-rule="evenodd" stroke="red"
+           points="50,0 21,90 98,35 2,35 79,90"/>
+
+  <!--
+  Effet sur une forme dans une forme
+  lorsque le segment va dans la même direction
+  (vers la droite)
+  -->
+  <path fill-rule="evenodd" stroke="red"
+        d="M110,0  h90 v90 h-90 z
+           M130,20 h50 v50 h-50 z"/>
+
+  <!--
+  Effet sur une forme dans une forme
+  lorsque le segment va dans la direction opposée
+  (vers la gauche contre vers la droite)
+  -->
+  <path fill-rule="evenodd" stroke="red"
+        d="M210,0  h90 v90 h-90 z
+           M230,20 v50 h50 v-50 z"/>
+</svg>
+ +

{{EmbedLiveSample('evenodd', '100%', 200)}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.attributes.presentation.fill-rule")}}

+ +

Spécification

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("SVG2", "painting.html#FillRuleProperty", "fill-rule")}}{{Spec2("SVG2")}}Définition pour les formes et le texte
{{SpecName("SVG1.1", "painting.html#FillRuleProperty", "fill-rule")}}{{Spec2("SVG1.1")}}Définition initiale pour les formes et le texte
+ +

 

diff --git a/files/fr/web/svg/attribute/fill/index.html b/files/fr/web/svg/attribute/fill/index.html new file mode 100644 index 0000000000..7b5682cd92 --- /dev/null +++ b/files/fr/web/svg/attribute/fill/index.html @@ -0,0 +1,453 @@ +--- +title: fill +slug: Web/SVG/Attribute/fill +tags: + - SVG + - SVG Attribute +translation_of: Web/SVG/Attribute/fill +--- +
{{SVGRef}}
+ +

L'attribut fill a deux significations différentes: 1. pour les formes et le texte, il définit le remplissage (couleur, dégradé, motif, etc); 2. pour les animations, il définit l'état final.

+ +

Cet attribut peut être appliqué à tous les éléments, en revanche il n'aura d'effet que sur les formes suivantes: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}

+ +

Pour les animations, il s'applique à cinq éléments: {{SVGElement('animate')}}, {{SVGElement('animateColor')}}, {{SVGElement('animateMotion')}}, {{SVGElement('animateTransform')}}, et {{SVGElement('set')}}

+ +
+ + +
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
+  <!-- Remplir avec une simple couleur -->
+  <circle cx="50" cy="50" r="40" fill="pink" />
+
+  <!-- Remplir avec un dégradé -->
+  <defs>
+    <radialGradient id="myGradient">
+      <stop offset="0%"   stop-color="pink" />
+      <stop offset="100%" stop-color="black" />
+    </radialGradient>
+  </defs>
+  <circle cx="150" cy="50" r="40" fill="url(#myGradient)" />
+
+  <!-- Définit l'état final d'un cercle animé -->
+  <circle cx="250" cy="50" r="20">
+    <animate attributeType="XML"
+             attributeName="r"
+             from="0" to="40" dur="5s"
+             fill="freeze" />
+  </circle>
+</svg>
+
+ +

{{EmbedLiveSample('topExample', '100%', 200)}}

+
+ +

altGlyph

+ +

Attention: {{SVGElement('altGlyph')}} est déprécié en SVG2 et ne devrait pas être utilisé.

+ +

Pour {{SVGElement('altGlyph')}}, fill est un attribut de présentation qui définit la couleur du glyphe.

+ + + + + + + + + + + + + + + + +
Valeur<paint>
Valeur par défautblack
AnimationOui
+ +

Note: fill étant un attribut de présentation, il peut être utilisé comme propriété CSS.

+ +

animate

+ +

Pour {{SVGElement('animate')}}, fill définit l'état final de l'animation.

+ + + + + + + + + + + + + + + + +
Valeurfreeze (Conserver la dernière image de l'animation) | remove (Conserver la première image de l'animation)
Valeur par défautremove
AnimationNon
+ +

animateColor

+ +

Attention: {{SVGElement('animateColor')}} est déprécié en SVG2 et ne devrait pas être utilisé. Utiliser {{SVGElement('animate')}} à la place.

+ +

Pour {{SVGElement('animateColor')}}, fill définit l'état final de l'animation.

+ + + + + + + + + + + + + + + + +
Valeurfreeze (Conserver la dernière image de l'animation) | remove (Conserver la première image de l'animation)
Valeur par défautremove
AnimationNon
+ +

animateMotion

+ +

Pour {{SVGElement('animateMotion')}}, fill définit l'état final de l'animation.

+ + + + + + + + + + + + + + + + +
Valeurfreeze (Conserver la dernière image de l'animation) | remove (Conserver la première image de l'animation)
Valeur par défautremove
AnimationNon
+ +

animateTransform

+ +

Pour {{SVGElement('animateTransform')}}, fill définit l'état final de l'animation.

+ + + + + + + + + + + + + + + + +
Valeurfreeze (Conserver la dernière image de l'animation) | remove (Conserver la première image de l'animation)
Valeur par défautremove
AnimationNon
+ +

circle

+ +

Pour {{SVGElement('circle')}}, fill est un attribut de présentation qui définit la couleur de remplissage du cercle.

+ + + + + + + + + + + + + + + + +
Valeur<paint>
Valeur par défautblack
AnimationOui
+ +

Note: fill étant un attribut de présentation, il peut être utilisé comme propriété CSS.

+ +

ellipse

+ +

Pour {{SVGElement('ellipse')}}, fill est un attribut de présentation qui définit la couleur de remplissage du cercle.

+ + + + + + + + + + + + + + + + +
Valeur<paint>
Valeur par défautblack
AnimationOui
+ +

Note: fill étant un attribut de présentation, il peut être utilisé comme propriété CSS.

+ +

path

+ +

Pour {{SVGElement('path')}}, fill est un attribut de présentation qui définit la couleur de remplissage de la forme. (Intérieur définit par l'attribut {{SVGAttr('fill-rule')}})

+ + + + + + + + + + + + + + + + +
Valeur<paint>
Valeur par défautblack
AnimationOui
+ +

Note: fill étant un attribut de présentation, il peut être utilisé comme propriété CSS.

+ +

polygon

+ +

Pour {{SVGElement('polygon')}}, fill est un attribut de présentation qui définit la couleur de remplissage de la forme. (Intérieur définit par l'attribut {{SVGAttr('fill-rule')}})

+ + + + + + + + + + + + + + + + +
Valeur<paint>
Valeur par défautblack
AnimationOui
+ +

Note: fill étant un attribut de présentation, il peut être utilisé comme propriété CSS.

+ +

polyline

+ +

For {{SVGElement('polyline')}}, fill est un attribut de présentation qui définit la couleur de remplissage de la forme. (Intérieur définit par l'attribut {{SVGAttr('fill-rule')}})

+ + + + + + + + + + + + + + + + +
Valeur<paint>
Valeur par défautblack
AnimationOui
+ +

Note: fill étant un attribut de présentation, il peut être utilisé comme propriété CSS.

+ +

rect

+ +

Pour {{SVGElement('rect')}}, fill est un attribut de présentation qui définit la couleur de remplissage du rectangle.

+ + + + + + + + + + + + + + + + +
Valeur<paint>
Valeur par défautblack
AnimationOui
+ +

Note: fill étant un attribut de présentation, il peut être utilisé comme propriété CSS.

+ +

set

+ +

Pour {{SVGElement('set')}}, fill définit l'état final de l'animation.

+ + + + + + + + + + + + + + + + +
Valeurfreeze (Conserver la dernière image de l'animation) | remove (Conserver la première image de l'animation)
Valeur par défautremove
AnimationNon
+ +

text

+ +

Pour {{SVGElement('text')}}, fill est un attribut de présentation qui définit la couleur du texte.

+ + + + + + + + + + + + + + + + +
Valeur<paint>
Valeur par défautblack
AnimationOui
+ +

Note: fill étant un attribut de présentation, il peut être utilisé comme propriété CSS.

+ +

textPath

+ +

Pour {{SVGElement('textPath')}}, fill est un attribut de présentation qui définit la couleur du texte.

+ + + + + + + + + + + + + + + + +
Valeur<paint>
Valeur par défautblack
AnimationOui
+ +

Note: fill étant un attribut de présentation, il peut être utilisé comme propriété CSS.

+ +

tref

+ +

Attention: {{SVGElement('tref')}} est déprécié en SVG2 et ne devrait pas être utilisé.

+ +

Pour {{SVGElement('tref')}}, fill est un attribut de présentation qui définit la couleur du texte.

+ + + + + + + + + + + + + + + + +
Valeur<paint>
Valeur par défautblack
AnimationOui
+ +

Note: fill étant un attribut de présentation, il peut être utilisé comme propriété CSS.

+ +

tspan

+ +

Pour {{SVGElement('tspan')}}, fill est un attribut de présentation qui définit la couleur du texte.

+ + + + + + + + + + + + + + + + +
Valeur<paint>
Valeur par défautblack
AnimationOui
+ +

Note: fill étant un attribut de présentation, il peut être utilisé comme propriété CSS.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("SVG Animations 2", "#FillAttribute", "transform")}}{{Spec2("SVG Animations 2")}}Définition pour les animations.
{{SpecName("SVG2", "painting.html#FillProperty", "fill")}}{{Spec2("SVG2")}}Définition pour les formes et le texte.
+ Ajoute context-fill et context-stroke.
{{SpecName("SVG1.1", "animate.html#FillAttribute", "fill")}}{{Spec2("SVG1.1")}}Définition initiale pour les animations.
{{SpecName("SVG1.1", "painting.html#FillProperty", "fill")}}{{Spec2("SVG1.1")}}Définition initiale pour les formes et le texte.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.attributes.presentation.fill")}}

+ +

Note: Pour plus d'informations sur les valeurs de context-fill (et context-stroke) dans des documents HTML, voir la documentation pour la propriété non-standard {{cssxref("-moz-context-properties")}}.

diff --git a/files/fr/web/svg/attribute/height/index.html b/files/fr/web/svg/attribute/height/index.html new file mode 100644 index 0000000000..848ac09f35 --- /dev/null +++ b/files/fr/web/svg/attribute/height/index.html @@ -0,0 +1,71 @@ +--- +title: Height +slug: Web/SVG/Attribute/height +tags: + - Attribut SVG + - SVG +translation_of: Web/SVG/Attribute/height +--- +

« SVG Attribute reference home

+ +

Cet attribut indique une dimension verticale <length> dans le système de coordonnées. La donnée (ou coordonnée) définie par cet attribut dépend de l'élément sur lequel il est appliqué. La plupart du temps, il représente la hauteur de la région rectangulaire composant l'élément (voir les exceptions dans la documentation pour chaque type d'élément).

+ +

Cet attribut doit être spécifié, hormis pour les éléments {{ SVGElement("svg") }} dont la valeur par défaut est de 100% et {{ SVGElement("mask") }} dont la valeur par défaut est de 120%.

+ +

Contexte d'utilisation

+ + + + + + + + + + + + + + + + + + + + +
CatégoriesAucune
Valeur<length>
AnimableOui
Documents normatifSVG 1.1 (2nd Edition): foreignObject element
+ SVG 1.1 (2nd Edition): image element
+ SVG 1.1 (2nd Edition): pattern element
+ SVG 1.1 (2nd Edition): rect element
+ SVG 1.1 (2nd Edition): svg element
+ SVG 1.1 (2nd Edition): use element
+ SVG 1.1 (2nd Edition): Filter primitive
+ SVG 1.1 (2nd Edition): mask element
+ +

{{ page("fr/docs/Web/SVG/Content_type","Length") }}

+ +

Exemple

+ +
<?xml version="1.0"?>
+<svg width="120" height="120"
+     viewBox="0 0 120 120"
+     xmlns="http://www.w3.org/2000/svg">
+
+  <rect x="10" y="10" width="100" height="100"/>
+</svg>
+ +

Eléments

+ +

Les éléments suivants peuvent utiliser l'attribut height :

+ + diff --git a/files/fr/web/svg/attribute/in/index.html b/files/fr/web/svg/attribute/in/index.html new file mode 100644 index 0000000000..fbf020b5d7 --- /dev/null +++ b/files/fr/web/svg/attribute/in/index.html @@ -0,0 +1,103 @@ +--- +title: in +slug: Web/SVG/Attribute/in +tags: + - SVG + - SVG Attribute + - SVG Filter +translation_of: Web/SVG/Attribute/in +--- +

« SVG Attribute reference home

+ +

L'attribut in identifie l'entrée pour la primitive de filtre donnée.

+ +

Cet attribut peut prendre pour valeur un des six mots-clés définis ci-dessous ou la valeur d'un attribut {{SVGAttr("result")}} d'une primitive précédente dans le même élément {{SVGElement("filter")}}. Si aucune valeur n'est définit et qu'il s'agit de la première primitive du filtre, alors la valeur par défaut est SourceGraphic. Si aucune valeur n'est définit et qu'il ne s'agit pas de la première primitive, alors la valeur par défaut est le résultat de la primitive précédente.
+
+ Si la même valeur de {{SVGAttr("result")}} apparaît à de multiples endroits dans un élément {{SVGElement("filter")}} donné, c'est la primitive de filtre avec cette valeur de {{SVGAttr("result")}} précédant la primitive en cours qui est la plus proche qui est utilisée.

+ +

Contexte d'utilisation

+ + + + + + + + + + + + + + + + + + + + +
CatégoriesNone
ValeurSourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>
AnimationOui
Document normatifSVG 1.1 (2nd Edition)
+ +
+
SourceGraphic
+
Ce mot-clé désigne l'élément graphique sur lequel s'applique le {{SVGElement("filter")}}.
+
SourceAlpha
+
SourceAlpha fonctionne de la même manière que SourceGraphic à la différence près que seul le canal alpha (la transparence) est utilisé.
+
BackgroundImage
+
Ce mot-clé désigne une capture de l'image du document SVG sous la région du filtre au moment où l'élément {{SVGElement("filter")}} a été invoqué.
+
BackgroundAlpha
+
Même principe que BackgroundImage à la différence près que seul le canal alpha est utilisé.
+
FillPaint
+
Ce mot-clé désigné la valeur de la propriété {{SVGAttr("fill")}} sur l'élément cible du filtre. Dans la plupart des cas, FillPaint est uniformément opaque, mais ce n'est pas le cas si la forme est remplit par un dégradé ou un motif qui contient des zones transparentes ou semi-transparentes.
+
StrokePaint
+
Ce mot-clé désigne la valeur de la propriété {{SVGAttr("stroke")}} sur l'élément cible du filtre. Dans la plupart des cas, StrokePaint est uniformément opaque, mais ce n'est pas le cas si la forme est remplit par un dégradé ou un motif qui contient des zones transparentes ou semi-transparentes.
+
+ +

Contournement pour BackgroundImage

+ +

À la place de in="BackgroundImage", on peut importer une image à fusionner à l'intérieur du filtre avec l'élément <feImage>.

+ +
<div style="width: 420px; height: 220px;">
+<svg style="width:200px; height:200px; display: inline;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <filter id="backgroundMultiply">
+      <!-- Ça ne marchera pas. -->
+      <feBlend in="BackgroundImage" in2="SourceGraphic" mode="multiply"/>
+    </filter>
+  </defs>
+  <image xlink:href="https://developer.mozilla.org/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/>
+  <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#backgroundMultiply);" />
+</svg>
+
+<svg style="width:200px; height:200px; display: inline;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <filter id="imageMultiply">
+      <!-- Solution de contournement. -->
+      <feImage xlink:href="https://developer.mozilla.org/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/>
+      <feBlend in2="SourceGraphic" mode="multiply"/>
+    </filter>
+  </defs>
+  <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#imageMultiply);"/>
+</svg>
+</div>
+ +

{{ EmbedLiveSample('Contournement_pour_BackgroundImage') }}

+ +

Éléments

+ +

Les éléments suivants peuvent utiliser l'attribut  in:

+ + diff --git a/files/fr/web/svg/attribute/index.html b/files/fr/web/svg/attribute/index.html new file mode 100644 index 0000000000..87b1834e9c --- /dev/null +++ b/files/fr/web/svg/attribute/index.html @@ -0,0 +1,477 @@ +--- +title: Référence des attributs SVG +slug: Web/SVG/Attribute +tags: + - Landing + - NeedsHelp + - SVG + - SVG Attribute + - SVG Reference + - TopicStub +translation_of: Web/SVG/Attribute +--- +
{{SVGRef}}
+ +

Les éléments SVG peuvent être modifiés en utilisant des attributs qui spécifient comment les éléments doivent être traités ou présentés. Ci-dessous, la liste de tous les attributs disponibles en SVG ainsi que des liens vers leur documentation pour vous aider à apprendre sur quels éléments ils s'appliquent et comment ils fonctionnent.

+ +

Attributs SVG de A à Z

+ +
+

A

+ + + +

B

+ + + +

C

+ + + +

D

+ + + +

E

+ + + +

F

+ + + +

G

+ + + +

H

+ + + +

I

+ + + +

K

+ + + +

L

+ + + +

M

+ + + +

N

+ + + +

O

+ + + +

P

+ + + +

R

+ + + +

S

+ + + +

T

+ + + +

U

+ + + +

V

+ + + +

W

+ + + +

X

+ + + +

Y

+ + + +

Z

+ + +
+ +

Attributs SVG par catégorie

+ +

Attributs Génériques

+ +

Attributs de base

+ +

{{SVGAttr("id")}}, {{SVGAttr("lang")}}, {{SVGAttr("tabindex")}}, {{SVGAttr("xml:base")}}, {{SVGAttr("xml:lang")}}, {{SVGAttr("xml:space")}}

+ +

Attributs de style

+ +

{{SVGAttr("class")}}, {{SVGAttr("style")}}

+ +

Attributs de traitement conditionnel

+ +

{{SVGAttr("externalResourcesRequired")}}, {{SVGAttr("requiredExtensions")}}, {{SVGAttr("requiredFeatures")}}, {{SVGAttr("systemLanguage")}}.

+ + + +

{{SVGAttr("xlink:href")}}, {{SVGAttr("xlink:type")}}, {{SVGAttr("xlink:role")}}, {{SVGAttr("xlink:arcrole")}}, {{SVGAttr("xlink:title")}}, {{SVGAttr("xlink:show")}}, {{SVGAttr("xlink:actuate")}}

+ +

Attributs de présentation

+ +
Notez que tous les attributs SVG de présentation peuvent être utilisés comme propriété CSS.
+ +

{{SVGAttr("alignment-baseline")}}, {{SVGAttr("baseline-shift")}}, {{SVGAttr("clip")}}, {{SVGAttr("clip-path")}}, {{SVGAttr("clip-rule")}}, {{SVGAttr("color")}}, {{SVGAttr("color-interpolation")}}, {{SVGAttr("color-interpolation-filters")}}, {{SVGAttr("color-profile")}}, {{SVGAttr("color-rendering")}}, {{SVGAttr("cursor")}}, {{SVGAttr("direction")}}, {{SVGAttr("display")}}, {{SVGAttr("dominant-baseline")}}, {{SVGAttr("enable-background")}}, {{SVGAttr("fill")}}, {{SVGAttr("fill-opacity")}}, {{SVGAttr("fill-rule")}}, {{SVGAttr("filter")}}, {{SVGAttr("flood-color")}}, {{SVGAttr("flood-opacity")}}, {{SVGAttr("font-family")}}, {{SVGAttr("font-size")}}, {{SVGAttr("font-size-adjust")}}, {{SVGAttr("font-stretch")}}, {{SVGAttr("font-style")}}, {{SVGAttr("font-variant")}}, {{SVGAttr("font-weight")}}, {{SVGAttr("glyph-orientation-horizontal")}}, {{SVGAttr("glyph-orientation-vertical")}}, {{SVGAttr("image-rendering")}}, {{SVGAttr("kerning")}}, {{SVGAttr("letter-spacing")}}, {{SVGAttr("lighting-color")}}, {{SVGAttr("marker-end")}}, {{SVGAttr("marker-mid")}}, {{SVGAttr("marker-start")}}, {{SVGAttr("mask")}}, {{SVGAttr("opacity")}}, {{SVGAttr("overflow")}}, {{SVGAttr("pointer-events")}}, {{SVGAttr("shape-rendering")}}, {{SVGAttr("stop-color")}}, {{SVGAttr("stop-opacity")}}, {{SVGAttr("stroke")}}, {{SVGAttr("stroke-dasharray")}}, {{SVGAttr("stroke-dashoffset")}}, {{SVGAttr("stroke-linecap")}}, {{SVGAttr("stroke-linejoin")}}, {{SVGAttr("stroke-miterlimit")}}, {{SVGAttr("stroke-opacity")}}, {{SVGAttr("stroke-width")}}, {{SVGAttr("text-anchor")}}, {{SVGAttr("transform")}}, {{SVGAttr("text-decoration")}}, {{SVGAttr("text-rendering")}}, {{SVGAttr("unicode-bidi")}}, {{SVGAttr("vector-effect")}}, {{SVGAttr("visibility")}}, {{SVGAttr("word-spacing")}}, {{SVGAttr("writing-mode")}}

+ +

Attributs de filtres

+ +

Attributs de primitives de filtre

+ +

{{SVGAttr("height")}}, {{SVGAttr("result")}}, {{SVGAttr("width")}}, {{SVGAttr("x")}}, {{SVGAttr("y")}}

+ +

Attributs de fonction de transfert

+ +

{{SVGAttr("type")}}, {{SVGAttr("tableValues")}}, {{SVGAttr("slope")}}, {{SVGAttr("intercept")}}, {{SVGAttr("amplitude")}}, {{SVGAttr("exponent")}}, {{SVGAttr("offset")}}

+ +

Attributs d'animation

+ +

Animation cible

+ +

{{SVGAttr("attributeType")}}, {{SVGAttr("attributeName")}}

+ +

Timing de l'animation

+ +

{{SVGAttr("begin")}}, {{SVGAttr("dur")}}, {{SVGAttr("end")}}, {{SVGAttr("min")}}, {{SVGAttr("max")}}, {{SVGAttr("restart")}}, {{SVGAttr("repeatCount")}}, {{SVGAttr("repeatDur")}}, {{SVGAttr("fill")}}

+ +

Valeurs de l'animation

+ +

{{SVGAttr("calcMode")}}, {{SVGAttr("values")}}, {{SVGAttr("keyTimes")}}, {{SVGAttr("keySplines")}}, {{SVGAttr("from")}}, {{SVGAttr("to")}}, {{SVGAttr("by")}}, {{SVGAttr("autoReverse")}}, {{SVGAttr("accelerate")}}, {{SVGAttr("decelerate")}}

+ +

Addition de l'animation

+ +

{{SVGAttr("additive")}}, {{SVGAttr("accumulate")}}

+ +

Attributs d'événement

+ +

Événements d'animation

+ +

onbegin, onend, onrepeat

+ +

Événements du document

+ +

onabort, onerror, onresize, onscroll, onunload

+ +

Événements globaux

+ +

oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting

+ +

Événement graphiques

+ +

onactivate, onfocusin, onfocusout

+ +

Voir aussi

+ + diff --git a/files/fr/web/svg/attribute/mask/index.html b/files/fr/web/svg/attribute/mask/index.html new file mode 100644 index 0000000000..a3145cc508 --- /dev/null +++ b/files/fr/web/svg/attribute/mask/index.html @@ -0,0 +1,86 @@ +--- +title: mask +slug: Web/SVG/Attribute/mask +translation_of: Web/SVG/Attribute/mask +--- +
{{SVGRef}}
+ +

L'attribut mask est un attribut de présentation principalement utilisé pour appliquer un trou (défini par un élément {{ SVGElement("mask") }}) sur l'élément qui possède cet attribut.

+ +

Note: On peut aussi utiliser l'attribut {{cssxref('mask')}} en CSS.

+ +
+ + +
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
+  <mask id="monMask" maskContentUnits="objectBoundingBox">
+    <rect    fill="white" x="0" y="0" width="100%" height="100%" />
+    <polygon fill="black" points="0.5,0.2 0.68,0.74 0.21,0.41 0.79,0.41 0.32,0.74" />
+  </mask>
+
+  <!-- Fait un trou de la forme d'une étoile sur le cercle rouge,
+  ce qui laisse apparaître le cercle jaune situé dessous. -->
+  <circle cx="50" cy="50" r="20" fill="yellow" />
+  <circle cx="50" cy="50" r="45" fill="red"
+          mask="url(#monMask)"/>
+</svg>
+ +

{{EmbedLiveSample('topExample', '100%', 150)}}

+
+ +

Depuis SVG2, l'attribut {{cssxref('mask')}} est défini comme une propriété CSS et comme une propriété raccourcie pour beaucoup d'autres propriétés: {{cssxref('mask-image')}}, {{cssxref('mask-mode')}}, {{cssxref('mask-repeat')}}, {{cssxref('mask-position')}}, {{cssxref('mask-clip')}}, {{cssxref('mask-origin')}}, {{cssxref('mask-size')}} et {{cssxref('mask-composite')}}.

+ +

Étant un attribut de présentation, il peut être appliqué sur n'importe quel élément, mais il a un effet visible surtout sur les éléments suivants: {{SVGElement('a')}}, {{SVGElement('circle')}}, {{SVGElement('clipPath')}}, {{SVGElement('ellipse')}}, {{SVGElement('g')}}, {{SVGElement('glyph')}}, {{SVGElement('image')}}, {{SVGElement('line')}}, {{SVGElement('marker')}}, {{SVGElement('mask')}}, {{SVGElement('path')}}, {{SVGElement('pattern')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('svg')}}, {{SVGElement('symbol')}}, {{SVGElement('text')}} et {{SVGElement('use')}}.

+ +

Contexte d'utilisation

+ + + + + + + + + + + + + + + + +
ValeurVoir la propriété CSS {{cssxref('mask')}}
Valeur par défautnone
AnimableOui
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.attributes.presentation.mask")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatusCommentaire
{{SpecName("CSS Masks", "#the-mask", 'mask')}}{{Spec2("CSS Masks")}} +

Étend cet usage pour les éléments HTML en créant un raccourci pour les nouvelles propriétés mask-* défini dans cette spécification.

+
{{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}}{{Spec2('SVG1.1')}}Définition initiale
diff --git a/files/fr/web/svg/attribute/points/index.html b/files/fr/web/svg/attribute/points/index.html new file mode 100644 index 0000000000..7c78fd2030 --- /dev/null +++ b/files/fr/web/svg/attribute/points/index.html @@ -0,0 +1,142 @@ +--- +title: points +slug: Web/SVG/Attribute/points +translation_of: Web/SVG/Attribute/points +--- +
{{SVGRef}}
+ +

L'attribut point défini une liste de points. Chaque point est défini par deux nombres représentant les coordonnées X et Y dans le système de coordonnées de l'utilisateur. Si une coordonnées est dépareillée elle sera ignorée.

+ +

Les éléments {{SVGElement("polyline")}} et {{SVGElement("polygon")}} utilisent cet attribut.

+ +
+ + +
<svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg">
+  <!-- polyline est une forme ouverte -->
+  <polyline stroke="black" fill="none"
+   points="50,0 21,90 98,35 2,35 79,90"/>
+
+  <!-- polygon est une forme fermée -->
+  <polygon stroke="black" fill="none" transform="translate(100,0)"
+   points="50,0 21,90 98,35 2,35 79,90"/>
+
+  <!--
+  Il est généralement recommendé de séparer les valeurs X et Y
+  avec une virgule et les coordonées avec des espaces.
+  Cela est plus lisible.
+  -->
+</svg>
+ +

{{EmbedLiveSample('topExample', '100%', 200)}}

+
+ +

polyline

+ +

Pour un élément {{SVGElement('polyline')}}, points défini une liste de point, chaqu'un représente le vecteur pour tracer la ligne. Chaque point est défini par X et Y dans le système de coordonées de l'utilisateur.

+ +

Remarque: Un polygone est une forme ouverte, ce qui implique que le dernier point n'est pas connecté au premier point.

+ + + + + + + + + + + + + + + + +
Valeur[ {{cssxref("number")}}+ ]#
Valeur par défautaucune
Peut être animéOui
+ +

Exemple

+ + + +
<svg viewBox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg">
+  <!-- polyline est une forme ouverte -->
+  <polyline stroke="black" fill="none"
+   points="50,0 21,90 98,35 2,35 79,90"/>
+</svg>
+ +

{{EmbedLiveSample('polyline', '100%', 200)}}

+ +

polygon

+ +

Pour un élément {{SVGElement('polyline')}}, points défini une liste de point, chaqu'un représente le vecteur pour tracer la ligne. Chaque point est défini par X et Y dans le système de coordonées de l'utilisateur.

+ +

Remarque: Un polygone est une forme fermée, ce qui implique que le dernier point est connecté au premier.

+ + + + + + + + + + + + + + + + +
Valeur[ {{cssxref("number")}}+ ]#
Valeur par défautaucune
Peut être animéOui
+ +

Example

+ + + +
<svg viewBox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg">
+  <!-- polygon est une forme fermée -->
+  <polygon stroke="black" fill="none"
+   points="50,0 21,90 98,35 2,35 79,90" />
+</svg>
+ +

{{EmbedLiveSample('polygon', '100%', 200)}}

+ +

Spécification

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatusCommentaire
{{SpecName("SVG2", "shapes.html#PolygonElementPointsAttribute", "points")}}{{Spec2("SVG2")}}Définition de <polygon>
{{SpecName("SVG2", "shapes.html#PolylineElementPointsAttribute", "points")}}{{Spec2("SVG2")}}Définition de <polyline>
{{SpecName("SVG1.1", "shapes.html#PolygonElementPointsAttribute", "points")}}{{Spec2("SVG1.1")}}Définition initiale de <polygon>
{{SpecName("SVG1.1", "shapes.html#PolylineElementPointsAttribute", "points")}}{{Spec2("SVG1.1")}}Définition initiale de <polyline>
diff --git a/files/fr/web/svg/attribute/presentation/index.html b/files/fr/web/svg/attribute/presentation/index.html new file mode 100644 index 0000000000..4d6ed7e8d3 --- /dev/null +++ b/files/fr/web/svg/attribute/presentation/index.html @@ -0,0 +1,278 @@ +--- +title: Attributs SVG de présentation +slug: Web/SVG/Attribute/Presentation +translation_of: Web/SVG/Attribute/Presentation +--- +

{{draft}}

+ +

Les attributs SVG de présentation sont des propriétés CSS pouvant être utilisées comme attributs sur les éléments SVG

+ +
+ +
+ +

Attributs

+ +

 

+ +
+
{{SVGAttr('alignment-baseline')}}
+
Spécifie comment un objet est aligné sur la ligne de pied de la police par rapport à son parent.
+ Valeur: auto|baseline|before-edge|text-before-edge|middle|central|after-edge|text-after-edge|ideographic|alphabetic|hanging|mathematical|inherit; Animation: Oui
+
{{SVGAttr('baseline-shift')}}
+
Permet de positionner la ligne de pied de l'élément par rapport à celle de son parent.
+ Valeur: auto|baseline|super|sub|<percentage>|<length>|inherit; Animation: Oui
+
{{SVGAttr('clip')}} {{deprecated_inline('css')}}
+
Définit quelle partie d'un élément est visible.
+ Valeur: auto|{{cssxref("shape")}}|inherit; Animation: Oui
+
{{SVGAttr('clip-path')}}
+
Associe un chemin de détourage {{SVGElement('clipPath')}} à l'élément.
+ Valeur: none|<FuncIRI>|inherit; Animation: Oui
+
{{SVGAttr('clip-rule')}}
+
Indique la règle de remplissage à appliquer sur un élément {{SVGElement('clipPath')}}.
+ Valeur: nonezero|evenodd|inherit; Animation: Oui
+
{{SVGAttr('color')}}
+
Définit la valeur potentielle (valeur de currentColor) pour les attributs de présentation fill, stroke, stop-color, flood-color et lighting-color.
+ Valeur: <color>|inherit; Animation: Oui
+
{{SVGAttr('color-interpolation')}}
+
Spécifie l'espace colométrique pour les interpolations de dégradés, les animations couleur et composition alpha.
+ Valeur: auto|sRGB|linearRGB|inherit; Animation: Oui
+
{{SVGAttr('color-interpolation-filters')}}
+
Spécifie l'espace colométrique pour les opérations effectuées via des effets de filtre.
+ Valeur: auto|sRGB|linearRGB|inherit; Animation: Oui
+
{{SVGAttr('color-profile')}} {{deprecated_inline('svg2')}}
+
Définit le profil de couleur qu'une image bitmap incluse via l'élément {{SVGElement('image')}} doit utiliser.
+ Valeur: auto|sRGB|linearRGB|<name>|<IRI>|inherit; Animation: Oui
+
{{SVGAttr('color-rendering')}}
+
Indique au navigateur comment optimiser ses opérations d'interpolation et de composition des couleurs.
+ Valeur: auto|optimizeSpeed|optimizeQuality|inherit; Animation: Oui
+
{{SVGAttr('cursor')}}
+
Spécifie le curseur affiché lorsque la souris passe au-desuss de l'élément.
+ Valeur: <FuncIRI>|<keywords>|inherit; Animation: Oui
+
{{SVGAttr('direction')}}
+
Spécifie la direction d'écriture du texte.
+ Valeur: ltr|rtl|inherit; Animation: Oui
+
{{SVGAttr('display')}}
+
Permet de contrôler le rendu d'éléments graphiques ou conteneurs.
+ Valeur: see css {{cssxref('display')}}; Animation: Oui
+
{{SVGAttr('dominant-baseline')}}
+
Définit la ligne de pied utilisée pour aligner le texte.
+ Valeur: auto|text-bottom|alphabetic|ideographic|middle|central| mathematical|hanging|text-top; Animation: Oui
+
{{SVGAttr('enable-background')}} {{deprecated_inline('svg2')}}
+
Indique au navigateur comment gérer l'image d'arrière plan.
+ Valeur: accumulate|new|inherit; Animation: Non
+
{{SVGAttr('fill')}}
+
Définit la couleur de remplissage d'un élément graphique.
+ Valeur: <paint>; Animation: Oui
+
{{SVGAttr('fill-opacity')}}
+
Définit l'opacité du remplissage de l'élément.
+ Valeur: <number>|<percentage>; Animation: Oui
+
{{SVGAttr('fill-rule')}}
+
Indique comment déterminer quelles parties du chemin se trouvent à l'intérieur de la forme.
+ Valeur: nonzero|evenodd|inherit; Animation: Oui
+
{{SVGAttr('filter')}}
+
Applique un filtre, définit par un élément {{SVGElement('filter')}}, à l'élément.
+ Valeur: <FuncIRI>|none|inherit; Animation: Oui
+
{{SVGAttr('flood-color')}}
+
Indique quelle couleur utiliser pour remplir la région du filtre, définit par les éléments {{SVGElement('feFlood')}} ou {{SVGElement('feDropShadow')}}.
+ Valeur: <color>; Animation: Oui
+
{{SVGAttr('flood-opacity')}}
+
Indique l'opacité à utiliser pour remplir la région du filtre, définit par les éléments {{SVGElement('feFlood')}} ou {{SVGElement('feDropShadow')}}.
+ Valeur: <number>|<percentage>; Animation: Oui
+
{{SVGAttr('font-family')}}
+
Indique la police utiliser pour restituer le texte de l'élément.
+ Valeur: see css {{cssxref('font-family')}}; Animation: Oui
+
{{SVGAttr('font-size')}}
+
Spécifie la taille de la police.
+ Valeur: see css {{cssxref('font-size')}}; Animation: Oui
+
{{SVGAttr('font-size-adjust')}}
+
Spécifie que la taille de la police doit être choisit en se basant sur la taille des lettres minuscules et non des majuscules.
+ Valeur: <number>|none|inherit; Animation: Oui
+
{{SVGAttr('font-stretch')}}
+
Sélectionne la version normale, condensée ou espacée d'une police.
+ Valeur: see css {{cssxref('font-stretch')}}; Animation: Oui
+
{{SVGAttr('font-style')}}
+
Spécifie si la police doit être stylisée en normal, italique ou oblique.
+ Valeur: normal|italic|oblique; Animation: Oui
+
{{SVGAttr('font-variant')}}
+
Spécifie si une police doit utiliser certaines variations, telles que les petites majuscules ou les ligatures.
+ Valeur: see css {{cssxref('font-variant')}}; Animation: Oui
+
{{SVGAttr('font-weight')}}
+
Spécifie l'épaisseur (ou graisse) de la police.
+ Valeur: normal|bold|lighter|bolder|100|200|300|400|500|600|700|800|900; Animation: Oui
+
{{SVGAttr('glyph-orientation-horizontal')}} {{deprecated_inline('svg2')}}
+
Contrôle l'orientation des glyphes lorsque la direction en ligne est horizontale.
+ Valeur: <angle>|inherit; Animation: Non
+
{{SVGAttr('glyph-orientation-vertical')}} {{deprecated_inline('svg2')}}
+
Contrôle l'orientation des glyphes lorsque la direction en ligne est verticale.
+ Valeur: auto|<angle>|inherit; Animation: Non
+
{{SVGAttr('image-rendering')}}
+
Indique au navigateur le compromis à effectuer entre vitesse et qualité du rendu des images.
+ Valeur: auto|optimizeQuality|optimizeSpeed; Animation: Oui
+
{{SVGAttr('kerning')}} {{deprecated_inline('svg2')}}
+
Indique au navigateur s'il doit ajuster l'espacement entre les glyphes.
+ Valeur: auto|<length>|inherit; Animation: Oui
+
{{SVGAttr('letter-spacing')}}
+
Contrôle l'espacement entre les caratères du texte.
+ Valeur: normal|<length>|inherit; Animation: Oui
+
{{SVGAttr('lighting-color')}}
+
Définit la couleur de la source de lumière pour les filtres {{SVGElement('feDiffuseLighting')}} et {{SVGElement('feSpecularLighting')}}.
+ Valeur: <color>; Animation: Oui
+
{{SVGAttr('marker-end')}}
+
Définit la pointe de la flèche ou polymarker dessiné à la fin de l'élément {{SVGElement('path')}} ou ou de la forme.
+ Valeur: <FuncIRI>|none|inherit; Animation: Oui
+
{{SVGAttr('marker-mid')}}
+
Définit la pointe de la flèche ou polymarker dessiné entre chaque segment de l'élément {{SVGElement('path')}} ou de la forme.
+ Valeur: <FuncIRI>|none|inherit; Animation: Oui
+
{{SVGAttr('marker-start')}}
+
Définit la pointe de la flèche ou polymarker dessiné au début de l'élément {{SVGElement('path')}} ou ou de la forme.
+ Valeur: <FuncIRI>|none|inherit; Animation: Oui
+
{{SVGAttr('mask')}}
+
Modifie la visibilité d'un élément en masquant ou détourant l'image à des endroits spécifiques.
+ Valeur: see css {{cssxref('mask')}}; Animation: Oui
+
{{SVGAttr('opacity')}}
+
Spécifie l'opacité d'un objet ou d'un groupe d'objets.
+ Valeur: <opacity-value>; Animation: Oui
+
{{SVGAttr('overflow')}}
+
Spécifie si le contenu d'un élément bloc est tronqué lorsqu'il déborde de la zone de l'élément.
+ Valeur: visible|hidden|scroll|auto|inherit; Animation: Oui
+
{{SVGAttr('pointer-events')}}
+
Définit si et quand un élément peut être la cible d'un événement de la souris.
+ Valeur: bounding-box|visiblePainted|visibleFil|visibleStroke|visible |painted|fill|stroke|all|none; Animation: Oui
+
{{SVGAttr('shape-rendering')}}
+
Indique au navigateur le compromis à effectuer entre vitesse et qualité du rendu des éléments {{SVGElement('path')}} et des formes.
+ Valeur: auto|optimizeSpeed|crispEdges|geometricPrecision |inherit; Animation: Oui
+
{{SVGAttr('solid-color')}}
+
-
+ Valeur:; Animation: -
+
{{SVGAttr('solid-opacity')}}
+
-
+ Valeur:; Animation: -
+
{{SVGAttr('stop-color')}}
+
Indique la couleur à utiliser sur un {{SVGElement('stop')}} d'un dégradé.
+ Valeur: currentColor|<color>|<icccolor>|inherit; Animation: Oui
+
{{SVGAttr('stop-opacity')}}
+
Indique l'opacité du {{SVGElement('stop')}}.
+ Valeur: <opacity-value>|inherit; Animation: Oui
+
{{SVGAttr('stroke')}}
+
Définit la couleur à utiliser pour le contour de l'élément.
+ Valeur: <paint>; Animation: Oui
+
{{SVGAttr('stroke-dasharray')}}
+
Définit le motif des pointillés utilisé pour dessiner le contour de la forme.
+ Valeur: none|<dasharray>; Animation: Oui
+
{{SVGAttr('stroke-dashoffset')}}
+
Décale la position de départ des pointillés.
+ Valeur: <percentage>|<length>; Animation: Oui
+
{{SVGAttr('stroke-linecap')}}
+
Définit la forme de la fin des lignes.
+ Valeur: butt|round|square; Animation: Oui
+
{{SVGAttr('stroke-linejoin')}}
+
Définit la manière de dessiner la liaison entre deux segments de ligne.
+ Valeur: arcs|bevel|miter|miter-clip|round; Animation: Oui
+
{{SVGAttr('stroke-miterlimit')}}
+
Définit la limite du rapport entre la longueur du coin et la valeur de {{SVGAttr('stroke-width')}} utilisée pour dessiner la liaison entre deux segments de ligne.
+ Valeur: <number>; Animation: Oui
+
{{SVGAttr('stroke-opacity')}}
+
Définit l'opacité du contour d'une forme.
+ Valeur: <opacity-value>|<percentage>; Animation: Oui
+
{{SVGAttr('stroke-width')}}
+
Définit l'épaisseur du contour appliqué à une forme.
+ Valeur: <length>|<percentage>; Animation: Oui
+
{{SVGAttr('text-anchor')}}
+
Définit l'alignement vertical d'une chaîne de texte.
+ Valeur: start|middle|end|inherit; Animation: Oui
+
{{SVGAttr('text-decoration')}}
+
Définit l'apparence des lignes décoratives sur le texte.
+ Valeur: none|underline|overline|line-through|blink|inherit; Animation: Oui
+
{{SVGAttr('text-rendering')}}
+
Indique au navigateur le compromis à effectuer entre vitesse et qualité du rendu du texte.
+ Valeur: auto|optimizeSpeed|optimizeLegibility|geometricPrecision|inherit; Animation: Oui
+
{{SVGAttr('transform')}}
+
Définit une liste de transformations à appliquer à un élément et à ses enfants.
+ Valeur: <transform-list>; Animation: Oui
+
{{SVGAttr('unicode-bidi')}}
+
-
+ Valeur:; Animation: -
+
{{SVGAttr('vector-effect')}}
+
Spécifie l'effet vectoriel à utiliser lors du dessin d'un objet.
+ Valeur: default|non-scaling-stroke|inherit|<uri>; Animation: Oui
+
{{SVGAttr('visibility')}}
+
Définit la visibilité d'éléments graphiques.
+ Valeur: visible|hidden|collapse|inherit; Animation: Oui
+
{{SVGAttr('word-spacing')}}
+
Définit la longueur des espaces entre les mots d'un texte.
+ Valeur: <length>|inherit; Animation: Oui
+
{{SVGAttr('writing-mode')}}
+
Spécifie si la direction d'un élément  {{SVGElement('text')}} doit être de gauche-à-droite, droite-à-gauche, ou de haut-en-bas.
+ Valeur: lr-tb|rl-tb|tb-rl|lr|rl|tb|inherit; Animation: Oui
+
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.attributes.presentation")}}

diff --git a/files/fr/web/svg/attribute/preserveaspectratio/index.html b/files/fr/web/svg/attribute/preserveaspectratio/index.html new file mode 100644 index 0000000000..b433de89fd --- /dev/null +++ b/files/fr/web/svg/attribute/preserveaspectratio/index.html @@ -0,0 +1,423 @@ +--- +title: preserveAspectRatio +slug: Web/SVG/Attribute/preserveAspectRatio +tags: + - SVG + - SVG Attribute +translation_of: Web/SVG/Attribute/preserveAspectRatio +--- +
{{SVGRef}}
+ +

L'attibut preserveAspectRatio indique comment un élément est mis à l'échelle lorsque le ratio largeur:hauteur du {{SVGAttr('viewBox')}} est différent du ratio de la zone d'affichage (définit par les attributs width et height).

+ +

Parce que les proportions du SVG sont définis par l'attribut viewBox, si ce dernier n'est pas définit alors l'attribut preserveAspectRatio n'a aucun effet (à l'exception près de l'élément {{SVGElement('image')}} comme décrit ci-dessous).

+ +

Exemple

+ +
<svg viewBox="-1 -1 162 92" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+     <path id="smiley" d="M50,10 A40,40,1,1,1,50,90 A40,40,1,1,1,50,10 M30,40 Q36,35,42,40 M58,40 Q64,35,70,40 M30,60 Q50,75,70,60 Q50,75,30,60" />
+  </defs>
+
+  <!-- (width>height) meet -->
+  <svg preserveAspectRatio="xMidYMid meet"  x="0"   y="0"  viewBox="0 0 100 100" width="20"  height="10"><use href="#smiley" /></svg>
+  <svg preserveAspectRatio="xMinYMid meet"  x="25"  y="0"  viewBox="0 0 100 100" width="20"  height="10"><use href="#smiley" /></svg>
+  <svg preserveAspectRatio="xMaxYMid meet"  x="50"  y="0"  viewBox="0 0 100 100" width="20"  height="10"><use href="#smiley" /></svg>
+
+  <!-- (width>height) slice -->
+  <svg preserveAspectRatio="xMidYMin slice" x="0"   y="15" viewBox="0 0 100 100" width="20"  height="10"><use href="#smiley" /></svg>
+  <svg preserveAspectRatio="xMidYMid slice" x="25"  y="15" viewBox="0 0 100 100" width="20"  height="10"><use href="#smiley" /></svg>
+  <svg preserveAspectRatio="xMidYMax slice" x="50"  y="15" viewBox="0 0 100 100" width="20"  height="10"><use href="#smiley" /></svg>
+
+  <!-- (width<height) meet -->
+  <svg preserveAspectRatio="xMidYMin meet"  x="75"  y="0"  viewBox="0 0 100 100" width="10"  height="25"><use href="#smiley" /></svg>
+  <svg preserveAspectRatio="xMidYMid meet"  x="90"  y="0"  viewBox="0 0 100 100" width="10"  height="25"><use href="#smiley" /></svg>
+  <svg preserveAspectRatio="xMidYMax meet"  x="105" y="0"  viewBox="0 0 100 100" width="10"  height="25"><use href="#smiley" /></svg>
+
+  <!-- (width<height) slice -->
+  <svg preserveAspectRatio="xMinYMid slice" x="120" y="0"  viewBox="0 0 100 100" width="10"  height="25"><use href="#smiley" /></svg>
+  <svg preserveAspectRatio="xMidYMid slice" x="135" y="0"  viewBox="0 0 100 100" width="10"  height="25"><use href="#smiley" /></svg>
+  <svg preserveAspectRatio="xMaxYMid slice" x="150" y="0"  viewBox="0 0 100 100" width="10"  height="25"><use href="#smiley" /></svg>
+
+  <!-- none -->
+  <svg preserveAspectRatio="none"           x="0"   y="30" viewBox="0 0 100 100" width="160" height="60"><use href="#smiley" /></svg>
+</svg>
+ + + +

{{EmbedLiveSample('topExample', '100%', 200)}}

+ +

Syntaxe

+ +
preserveAspectRatio="<align> [<meetOrSlice>]"
+ +

La valeur de l'attribut est constituée d'un ou deux mots clés: l'alignement et l'option "meet ou slice" (satisfaire ou trancher) comme décrit ci-dessous:

+ +
+
Alignement
+
L'alignement indique s'il faut forcer une mise à l'échelle uniforme et si oui, comment faire dans le cas où le rapport largeur:hauteur du {{ SVGAttr("viewBox") }} ne correspond pas à celui affiché. Les différentes valeurs possibles sont: +
    +
  • none
    + Ne pas forcer la mise à l'échelle uniforme. Étirer le contenu de manière à ce que le contenu remplisse toute la hauteur et toute la largeur affichée. Notez que si <align> vaut none, alors la valeur <meetOrSlice> est ignorée.
    • +
  • xMinYMin - Force la mise à l'échelle uniforme.
    + Aligne le côté gauche de l'élément à gauche de la zone d'affichage.
    + Aligne le côté haut de l'élément en haut de la zone d'affichage.
    • +
  • xMidYMin - Force la mise à l'échelle uniforme.
    + Aligne horizontalement le centre de l'élément au milieu de la zone d'affichage.
    + Aligne le côté haut de l'élément en haut de la zone d'affichage.
    • +
  • xMaxYMin - Force la mise à l'échelle uniforme.
    + Aligne le côté droit de l'élément à droite de la zone d'affichage.
    + Aligne le côté haut de l'élément en haut de la zone d'affichage.
    • +
  • xMinYMid - Force la mise à l'échelle uniforme.
    + Aligne le côté gauche de l'élément à gauche de la zone d'affichage.
    + Aligne verticalement le centre de l'élément au milieu de la zone d'affichage.
    • +
  • xMidYMid (par défaut) - Force la mise à l'échelle uniforme.
    + Aligne horizontalement le centre de l'élément au milieu de la zone d'affichage.
    + Aligne verticalement le centre de l'élément au milieu de la zone d'affichage.
    • +
  • xMaxYMid - Force la mise à l'échelle uniforme.
    + Aligne le côté droit de l'élément à droite de la zone d'affichage.
    + Aligne verticalement le centre de l'élément au milieu de la zone d'affichage.
    • +
  • xMinYMax - Force la mise à l'échelle uniforme.
    + Aligne le côté gauche de l'élément à gauche de la zone d'affichage.
    + Aligne le côté bas de l'élément en bas de la zone d'affichage.
    • +
  • xMidYMax - Force la mise à l'échelle uniforme.
    + Aligne horizontalement le centre de l'élément au milieu de la zone d'affichage.
    + Aligne le côté bas de l'élément en bas de la zone d'affichage.
    • +
  • xMaxYMax - Force la mise à l'échelle uniforme.
    + Aligne le côté droit de l'élément à droite de la zone d'affichage.
    + Aligne le côté bas de l'élément en bas de la zone d'affichage.
    • +
+
+
Meet ou slice
+
La valeur meet ou slice est optionnelle. Les deux valeurs possibles sont: +
    +
  • meet (par défaut) - Mettre à l'échelle l'image tel que: +
      +
    • les proportions sont préservées
      • +
    • la {{ SVGAttr("viewBox") }} est entièrement visible dans la zone d'affichage
      • +
    • la {{ SVGAttr("viewBox") }} est agrandie autant que possible, tout en respectant les autres critères
      • +
    + Autrement dit, si les proportions du contenu ne correspondent pas à la zone d'affichage, la zone d'affichage sera agrandie au-delà du {{ SVGAttr("viewBox") }} (la zone dans laquelle sera dessinée la {{ SVGAttr("viewBox") }} sera plus petite que la zone d'affichage).
    • +
  • slice - Mettre à l'échelle l'image tel que: +
      +
    • les proportions sont préservées
      • +
    • la zone d'affichage est entièrement remplie par la {{ SVGAttr("viewBox") }}
      • +
    • la {{ SVGAttr("viewBox") }} est réduite autant que possible, tout en respectant les autres critères
      • +
    + Autrement dit, si les proportions du contenu ne correspondent pas à la zone d'affichage, la {{ SVGAttr("viewBox") }} sera agrandie au-delà de la zone d'affichage (la zone dans laquelle sera dessinée la {{ SVGAttr("viewBox") }} sera plus grande que la zone d'affichage).
    • +
+
+
+ +

Éléments

+ +

Sept éléments utilisent cet attribut: {{SVGElement("svg")}}, {{SVGElement("symbol")}}, {{SVGElement("image")}}, {{SVGElement("feImage")}}, {{SVGElement("marker")}}, {{SVGElement("pattern")}}, and {{SVGElement("view")}}.

+ +

feImage

+ +

Pour {{SVGElement('feImage')}}, preserveAspectRatio définit comment l'image doit être ajustée dans le rectangle défini par l'élément <feImage>.

+ + + + + + + + + + + + + + + + +
Valeur<align> <meetOrSlice>?
Valeur par défautxMidYMid meet
AnimationOui
+ +

image

+ +

Pour {{SVGElement('feImage')}}, preserveAspectRatio définit comment l'image doit être ajustée dans le rectangle défini par l'élément <image>.

+ + + + + + + + + + + + + + + + +
Valeur<align> <meetOrSlice>?
Valeur par défautxMidYMid meet
AnimationOui
+ +

marker

+ +

Pour {{SVGElement('marker')}}, preserveAspectRatio indique si une mise à l'échelle unifrome doit être effectuée pour s'adapter à la zone d'affichage.

+ + + + + + + + + + + + + + + + +
Valeur<align> <meetOrSlice>?
Valeur par défautxMidYMid meet
AnimationOui
+ +

pattern

+ +

Pour {{SVGElement('pattern')}}, preserveAspectRatio indique si une mise à l'échelle unifrome doit être effectuée pour s'adapter à la zone d'affichage.

+ + + + + + + + + + + + + + + + +
Valeur<align> <meetOrSlice>?
Valeur par défautxMidYMid meet
AnimationOui
+ +

svg

+ +

Pour {{SVGElement('svg')}}, preserveAspectRatio indique si une mise à l'échelle unifrome doit être effectuée pour s'adapter à la zone d'affichage.

+ + + + + + + + + + + + + + + + +
Valeur<align> <meetOrSlice>?
Valeur par défautxMidYMid meet
AnimationOui
+ +

symbol

+ +

Pour {{SVGElement('symbol')}}, preserveAspectRatio indique si une mise à l'échelle unifrome doit être effectuée pour s'adapter à la zone d'affichage.

+ + + + + + + + + + + + + + + + +
Valeur<align> <meetOrSlice>?
Valeur par défautxMidYMid meet
AnimationOui
+ +

view

+ +

Pour {{SVGElement('view')}}, preserveAspectRatio indique si une mise à l'échelle unifrome doit être effectuée pour s'adapter à la zone d'affichage.

+ + + + + + + + + + + + + + + + +
Valeur<align> <meetOrSlice>?
Valeur par défautxMidYMid meet
AnimationOui
+ +

Spécification

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("Filters 1.0", "#element-attrdef-feimage-preserveaspectratio", "preserveAspectRatio")}}{{Spec2('Filters 1.0')}} 
{{SpecName("SVG2", "coords.html#PreserveAspectRatioAttribute", "preserveAspectRatio")}}{{Spec2("SVG2")}} 
{{SpecName("SVG1.1", "coords.html#PreserveAspectRatioAttribute", "preserveAspectRatio")}}{{Spec2("SVG1.1")}}Définition initiale
diff --git a/files/fr/web/svg/attribute/seed/index.html b/files/fr/web/svg/attribute/seed/index.html new file mode 100644 index 0000000000..3f2512fcf3 --- /dev/null +++ b/files/fr/web/svg/attribute/seed/index.html @@ -0,0 +1,44 @@ +--- +title: seed +slug: Web/SVG/Attribute/seed +tags: + - Attribut SVG + - Filtre +translation_of: Web/SVG/Attribute/seed +--- +

« Page de référence des attributs SVG

+ +

L'attribut seed représente le nombre palier pour la pseudo génération d'un nombre aléatoire via la primitive {{SVGElement("feTurbulence")}}.

+ +

Si l'attribut n'est pas spécifié, alors le palier sera fixé à 0.

+ +

Contexte d'usage

+ + + + + + + + + + + + + + + + + + + + +
CatégoriesAucun
Valeur<number>
AnimableOui
Document normatifSVG 1.1 (2nd Edition)
+ +

Éléments

+ +

Les éléments suivants peuvent être utilisés avec l'attribut seed  :

+ + diff --git a/files/fr/web/svg/attribute/stroke-dasharray/index.html b/files/fr/web/svg/attribute/stroke-dasharray/index.html new file mode 100644 index 0000000000..e082fc487e --- /dev/null +++ b/files/fr/web/svg/attribute/stroke-dasharray/index.html @@ -0,0 +1,89 @@ +--- +title: stroke-dasharray +slug: Web/SVG/Attribute/stroke-dasharray +tags: + - Attribut SVG + - SVG +translation_of: Web/SVG/Attribute/stroke-dasharray +--- +

L'attribut stroke-dasharray contrôle le motif et l'espacement entre les segments utilisés pour tracer le contour d'un élément via l'attribut stroke. L'attribut définit ainsi un motif constitué d'une suite de segments et de vides dont la forme se rapprochera d'une ligne de pointillés. 

+ +

Note: Comme il s'agit d'un attribut de présentation, stroke-dasharray peut aussi être utilisé directement dans une feuille de style CSS.

+ +

Les éléments suivants peuvent utiliser l'attribut stroke-dasharray: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}

+ +

Exemple

+ + + +
<svg viewBox="0 0 30 10" version="1.1" xmlns="http://www.w3.org/2000/svg">
+
+    <line                                  x1="0" y1="1" x2="30" y2="1" stroke="black" />
+    <line stroke-dasharray="4"             x1="0" y1="3" x2="30" y2="3" stroke="black" />
+    <line stroke-dasharray="4, 1"          x1="0" y1="5" x2="30" y2="5" stroke="black" />
+    <line stroke-dasharray="4, 1, 2"       x1="0" y1="7" x2="30" y2="7" stroke="black" />
+    <line stroke-dasharray="4, 1, 2, 3"    x1="0" y1="9" x2="30" y2="9" stroke="black" />
+</svg>
+
+ +

{{ EmbedLiveSample('Exemple', '220', '150', '', 'Web/SVG/Attribute/stroke-dasharray') }}

+ +

Contexte d'usage

+ + + + + + + + + + + + + + + + + + + + +
CatégoriesAttribut de présentation
Valeurnone | <dasharray> | inherit
AnimableOui
Document normatifSVG 1.1 (2nd Edition)
+ +
+
<dasharray>
+
Il s'agit d'une liste de mesures <length> et <percentage> séparées par des virgules ou des espaces blancs. Ils permettent de spécifier la longeur de l'alternance entre segments et vides. Si un nombre impair de valeurs est entré, alors la liste sera répartie afin de créer un nombre pair de valeurs par répétition. Ainsi, 5,3,2 sera rendu comme 5,3,2,5,3,2.
+
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.attributes.presentation.stroke-dasharray")}}

+ +

Spécification

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("SVG2", "painting.html#StrokeDasharrayProperty", "stroke-dasharray")}}{{Spec2("SVG2")}}Définition pour les formes et textes
{{SpecName("SVG1.1", "painting.html#StrokeDasharrayProperty", "stroke-dasharray")}}{{Spec2("SVG1.1")}}Définition initiale pour les formes et textes
diff --git a/files/fr/web/svg/attribute/stroke-dashoffset/index.html b/files/fr/web/svg/attribute/stroke-dashoffset/index.html new file mode 100644 index 0000000000..e500cc9a77 --- /dev/null +++ b/files/fr/web/svg/attribute/stroke-dashoffset/index.html @@ -0,0 +1,115 @@ +--- +title: stroke-dashoffset +slug: Web/SVG/Attribute/stroke-dashoffset +tags: + - SVG + - SVG Attribute +translation_of: Web/SVG/Attribute/stroke-dashoffset +--- +
{{SVGRef}}
+ +

L'attribut stroke-dashoffset décale la position de départ des pointillés sur les lignes SVG.

+ +

Note: stroke-dashoffset étant un attribut de présentation, il peut être utilisé comme propriété CSS.

+ +

Cet attribut peut être appliqué sur tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}

+ +
+ + +
<svg viewBox="-3 0 33 10" xmlns="http://www.w3.org/2000/svg">
+  <!-- Pas de tiret -->
+  <line x1="0" y1="1" x2="30" y2="1" stroke="black" />
+
+  <!-- Pas de décalage -->
+  <line x1="0" y1="3" x2="30" y2="3" stroke="black"
+        stroke-dasharray="3 1" />
+
+  <!--
+  Le début des tirets est décalé
+  de 3 unités vers la gauche
+  -->
+  <line x1="0" y1="5" x2="30" y2="5" stroke="black"
+        stroke-dasharray="3 1"
+        stroke-dashoffset="3" />
+
+  <!--
+  Le début des tirets est décalé
+  de 3 unités vers la droite (-3)
+  -->
+  <line x1="0" y1="7" x2="30" y2="7" stroke="black"
+        stroke-dasharray="3 1"
+        stroke-dashoffset="-3" />
+
+  <!--
+  Le début des tirets est décalé
+  de 1 unité vers la gauche
+  ce qui affiche la même chose que l'exemple précédent
+  -->
+  <line x1="0" y1="9" x2="30" y2="9" stroke="black"
+        stroke-dasharray="3 1"
+        stroke-dashoffset="1" />
+
+  <!--
+  Lignes rouges pour indiquer la position
+  de départ des tirets
+  -->
+  <path d="M0,5 h-3 M0,7 h3 M0,9 h-1" stroke="rgba(255,0,0,.5)" />
+</svg>
+
+ +

{{EmbedLiveSample('topExample', '100%', 200)}}

+
+ +

Notes d'usage

+ + + + + + + + + + + + + + + + +
Valeur<percentage> | <length>
Valeur par défaut0
AnimationOui
+ +

Le décalage est généralement exprimé en unités résolues par {{SVGAttr('pathLength')}} mais si un <percentage> est utilisé, alors la valeur est résolue en pourcentage du viewport.

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.attributes.presentation.stroke-dashoffset")}}

+ +

Spécification

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("SVG2", "painting.html#StrokeDashoffsetProperty", "stroke-dashoffset")}}{{Spec2("SVG2")}}Définition pour les formes et le texte
{{SpecName("SVG1.1", "painting.html#StrokeDashoffsetProperty", "stroke-dashoffset")}}{{Spec2("SVG1.1")}}Définition initiale pour les formes et le texte
diff --git a/files/fr/web/svg/attribute/stroke-linecap/index.html b/files/fr/web/svg/attribute/stroke-linecap/index.html new file mode 100644 index 0000000000..0a911068f3 --- /dev/null +++ b/files/fr/web/svg/attribute/stroke-linecap/index.html @@ -0,0 +1,195 @@ +--- +title: stroke-linecap +slug: Web/SVG/Attribute/stroke-linecap +tags: + - SVG + - SVG Attribute +translation_of: Web/SVG/Attribute/stroke-linecap +--- +
{{SVGRef}}
+ +

L'attribut stroke-linecap définit la forme de la fin des lignes SVG.

+ +

Note: stroke-linecap étant un attribut de présentation, il peut être utilisé comme propriété CSS.

+ +

Cet attribut peut être appliqué à tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polyline')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}

+ +
+ + +
<svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
+
+  <!-- Effet de la valeur "butt" (valeur par défaut) -->
+  <line x1="1" y1="1" x2="5" y2="1" stroke="black"
+        stroke-linecap="butt" />
+
+  <!-- Effet de la valeur "round" -->
+  <line x1="1" y1="3" x2="5" y2="3" stroke="black"
+        stroke-linecap="round" />
+
+  <!-- Effet de la valeur "square" -->
+  <line x1="1" y1="5" x2="5" y2="5" stroke="black"
+        stroke-linecap="square" />
+
+  <!--
+  Les lignes roses indiquent la position
+  du chemin pour chaque trait
+  -->
+  <path d="M1,1 h4 M1,3 h4 M1,5 h4" stroke="pink" stroke-width="0.025" />
+</svg>
+
+ +

{{EmbedLiveSample('topExample', '100%', 200)}}

+
+ +

Notes d'usage

+ + + + + + + + + + + + + + + + +
Valeurbutt | round | square
Valeur par défautbutt
AnimationOui
+ +

butt

+ +

La valeur butt indique que le trait de chaque chemin ne s'étend pas au-delà de ses extremités. Un chemin de longueur zéro ne s'affichera pas du tout.

+ +

Exemple

+ + + +
<svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg">
+
+  <!-- Effet de la valeur "butt" -->
+  <path d="M1,1 h4" stroke="black"
+        stroke-linecap="butt" />
+
+  <!-- Effet de la valeur "butt" sur un chemin de longueur zéro -->
+  <path d="M3,3 h0" stroke="black"
+        stroke-linecap="butt" />
+
+
+  <!--
+  Lignes roses pour indiquer la position
+  du chemin pour chaque trait
+  -->
+  <path d="M1,1 h4" stroke="pink" stroke-width="0.025" />
+  <circle cx="1" cy="1" r="0.05" fill="pink" />
+  <circle cx="5" cy="1" r="0.05" fill="pink" />
+  <circle cx="3" cy="3" r="0.05" fill="pink" />
+</svg>
+
+ +

{{EmbedLiveSample('butt', '100%', 200)}}

+ +

round

+ +

La valeur round indique que la fin de chaque trait sera prolongé d'un demi-cerlce de diamètre égal à la la largeur du trait. Pour un chemin de longueur zéro, un cercle complet est affiché.

+ +

Exemple

+ + + +
<svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg">
+
+  <!-- Effet de la valeur "round" -->
+  <path d="M1,1 h4" stroke="black"
+        stroke-linecap="round" />
+
+  <!-- Effet de la valeur "round" sur un chemin de longueur zéro -->
+  <path d="M3,3 h0" stroke="black"
+        stroke-linecap="round" />
+
+
+  <!--
+  Lignes roses pour indiquer la position
+  du chemin pour chaque trait
+  -->
+  <path d="M1,1 h4" stroke="pink" stroke-width="0.025" />
+  <circle cx="1" cy="1" r="0.05" fill="pink" />
+  <circle cx="5" cy="1" r="0.05" fill="pink" />
+  <circle cx="3" cy="3" r="0.05" fill="pink" />
+</svg>
+
+ +

{{EmbedLiveSample('round', '100%', 200)}}

+ +

square

+ +

La valeur square indique que la fin de chaque trait sera prolongé par un rectangle d'une taille égale à la moitié de l'épaisseur du contour. Pour un chemin de longueur zéro, seul un rectangle est affiché, de la longueur de l'épaisseur du contour, et centré autour de la position du chemin.

+ +

Exemple

+ + + +
<svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg">
+
+  <!-- Effet de la valeur "square" -->
+  <path d="M1,1 h4" stroke="black"
+        stroke-linecap="square" />
+
+  <!-- Effet de la valeur "square" sur un chemin de longueur zéro -->
+  <path d="M3,3 h0" stroke="black"
+        stroke-linecap="square" />
+
+  <!--
+  Les lignes roses indiquent la position
+  du chemin pour chaque trait
+  -->
+  <path d="M1,1 h4" stroke="pink" stroke-width="0.025" />
+  <circle cx="1" cy="1" r="0.05" fill="pink" />
+  <circle cx="5" cy="1" r="0.05" fill="pink" />
+  <circle cx="3" cy="3" r="0.05" fill="pink" />
+</svg>
+
+ +

{{EmbedLiveSample('square', '100%', 200)}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.attributes.presentation.stroke-linecap")}}

+ +

Spécification

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("SVG2", "painting.html#StrokeLinecapProperty", "stroke-linecap")}}{{Spec2("SVG2")}}Définition pour les formes et le texte
{{SpecName("SVG1.1", "painting.html#StrokeLinecapProperty", "stroke-linecap")}}{{Spec2("SVG1.1")}}Définition initiale pour les formes et le texte
diff --git a/files/fr/web/svg/attribute/stroke-linejoin/index.html b/files/fr/web/svg/attribute/stroke-linejoin/index.html new file mode 100644 index 0000000000..0446a67b2a --- /dev/null +++ b/files/fr/web/svg/attribute/stroke-linejoin/index.html @@ -0,0 +1,312 @@ +--- +title: stroke-linejoin +slug: Web/SVG/Attribute/stroke-linejoin +tags: + - SVG + - SVG Attribute +translation_of: Web/SVG/Attribute/stroke-linejoin +--- +
{{SVGRef}}
+ +

L'attribut stroke-linejoin définit la manière de dessiner la liaison entre deux segments de ligne.

+ +
Note: stroke-linejoin étant un attribut de présentation, il peut être utililsé comme propriété CSS.
+ +

Cet attribut peut être appliqué sur tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}

+ +
+ + +
<svg viewBox="0 0 18 12" xmlns="http://www.w3.org/2000/svg">
+  <!--
+  Chemin en haut à gauche:
+  Effet de la valeur "miter"
+  -->
+  <path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none"
+        stroke-linejoin="miter" />
+
+  <!--
+  Chemin en haut au milieu:
+  Effet de la valeur "round"
+  -->
+  <path d="M7,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none"
+        stroke-linejoin="round" />
+
+  <!--
+  Chemin en haut à droite:
+  Effet de la valeur "bevel"
+  -->
+  <path d="M13,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none"
+        stroke-linejoin="bevel" />
+
+  <!--
+  Chemin en bas à gauche:
+  Effet de la valeur "miter-clip"
+  se replit sur la valeur par défaut (miter) si non pris en charge
+  -->
+  <path d="M3,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none"
+        stroke-linejoin="miter-clip" />
+
+  <!--
+  Chemin en bas à droite:
+  Effet de la valeur "arcs"
+  se replit sur la valeur par défaut (miter) si non pris en charge
+  -->
+  <path d="M9,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none"
+        stroke-linejoin="arcs" />
+
+  <!--
+  Lignes roses qui indiquent la position
+  du chemin pour chaque trait
+  -->
+  <g id="highlight">
+    <path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5"
+          stroke="pink" fill="none" stroke-width="0.025" />
+    <circle cx="1" cy="5"   r="0.05" fill="pink" />
+    <circle cx="3" cy="2"   r="0.05" fill="pink" />
+    <circle cx="5" cy="5.5" r="0.05" fill="pink" />
+  </g>
+  <use xlink:href="#highlight" x="6" />
+  <use xlink:href="#highlight" x="12" />
+  <use xlink:href="#highlight" x="2" y="6" />
+  <use xlink:href="#highlight" x="8" y="6" />
+</svg>
+
+ +

{{EmbedLiveSample('topExample', '100%', 400)}}

+
+ +

Contexte d'utilisation

+ + + + + + + + + + + + + + + + +
Valeurarcs | bevel |miter | miter-clip | round
Valeur par défautmiter
AnimationOui
+ +

arcs

+ +
Note: La valeur arcs a été introduite en SVG2 et n'est pas souvent pris en charge pour le moment, voir {{anch("Compatibilité des navigateurs")}} ci-dessous pour plus de détails.
+ +

La valeur arcs indique qu'un arc est utilisé pour joindre les segments du chemin. L'arc est formé en prolongeant les bords extérieurs du trait au point de liaison, avec la même courbe que ce bord.

+ +

Exemple

+ + + +
<svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
+  <!-- Effet de la valeur "arcs" -->
+  <path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3" stroke="black" fill="none"
+        stroke-linejoin="arcs" />
+
+  <!--
+  Lignes roses qui indiquent la position
+  du chemin pour chaque trait
+  -->
+  <g id="p">
+    <path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3"
+          stroke="pink" fill="none" stroke-width="0.025" />
+    <circle cx="1" cy="5" r="0.05" fill="pink" />
+    <circle cx="3" cy="2" r="0.05" fill="pink" />
+    <circle cx="5" cy="5" r="0.05" fill="pink" />
+  </g>
+</svg>
+ +

{{EmbedLiveSample('arcs', '100%', 200)}}

+ +

bevel

+ +

La valeur bevel indique qu'un coin biseauté est utilisé pour joindre les segments du chemin.

+ +

Exemple

+ + + +
<svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
+  <!-- Effet de la valeur "bevel" -->
+  <path d="M1,5 l2,-3 l2,3" stroke="black" fill="none"
+        stroke-linejoin="bevel" />
+
+  <!--
+  Lignes roses qui indiquent la position
+  du chemin pour chaque trait
+  -->
+  <g id="p">
+    <path d="M1,5 l2,-3 l2,3"
+          stroke="pink" fill="none" stroke-width="0.025" />
+    <circle cx="1" cy="5" r="0.05" fill="pink" />
+    <circle cx="3" cy="2" r="0.05" fill="pink" />
+    <circle cx="5" cy="5" r="0.05" fill="pink" />
+  </g>
+</svg>
+ +

{{EmbedLiveSample('bevel', '100%', 200)}}

+ +

miter

+ +

La valeur miter indique qu'un angle droit est utilisé pour joindre les segments du chemin. Le coin est formé en prolongeant les bords extérieurs du trait jusqu'à ce qu'ils se joignent.

+ +
Note: Si la longueur du coin dépasse {{SVGAttr('stroke-miterlimit')}}, un coin de type bevel est utilisé à la place.
+ +

Exemple

+ + + +
<svg viewBox="0 -1 10 7" xmlns="http://www.w3.org/2000/svg">
+  <!-- Effet de la valeur "miter" -->
+  <path d="M1,5 l2,-3 l2,3" stroke="black" fill="none"
+        stroke-linejoin="miter" />
+
+  <!-- Effet de la valeur "miter" sur un angle aigu
+       où la limite stroke-miterlimit est dépassée -->
+  <path d="M7,5 l0.75,-3 l0.75,3" stroke="black" fill="none"
+        stroke-linejoin="miter" />
+
+  <!-- Ligne rouge pointillé qui indique la limite
+       à partir de laquelle une liaison miter devient bevel -->
+  <path d="M0,0 h10" stroke="red" stroke-dasharray="0.05"  stroke-width="0.025"/>
+
+  <!--
+  Lignes roses qui indiquent la position
+  du chemin pour chaque trait
+  -->
+  <g>
+    <path d="M1,5 l2,-3 l2,3" stroke="pink" fill="none" stroke-width="0.025" />
+    <circle cx="1" cy="5" r="0.05" fill="pink" />
+    <circle cx="3" cy="2" r="0.05" fill="pink" />
+    <circle cx="5" cy="5" r="0.05" fill="pink" />
+
+    <path d="M7,5 l0.75,-3 l0.75,3" stroke="pink" fill="none" stroke-width="0.025" />
+    <circle cx="7"    cy="5" r="0.05" fill="pink" />
+    <circle cx="7.75" cy="2" r="0.05" fill="pink" />
+    <circle cx="8.5"  cy="5" r="0.05" fill="pink" />
+  </g>
+</svg>
+ +

{{EmbedLiveSample('miter', '100%', 200)}}

+ +

miter-clip

+ +
Note: La valeur miter-clip a été introduite en SVG2 et n'est pas souvent pris en charge pour le moment, voir {{anch("Compatibilité des navigateurs")}} ci-dessous pour plus de détails.
+ +

La valeur miter-clip indique qu'un angle droit est utilisé pour joindre les segments du chemin. Le coin est formé en prolongeant les bords extérieurs du trait jusqu'à ce qu'ils se joignent.

+ +

Si la longueur du coin dépasse {{SVGAttr('stroke-miterlimit')}}, le coin tronqué à une distance égale à la moitié de la valeur de {{SVGAttr('stroke-miterlimit')}} multiplié par l'épaisseur du trait. Cela fournit un meilleur rendu que miter sur les angles très aigus et dans le cas d'une animation.

+ +

Exemple

+ + + +
<svg viewBox="0 -1 10 7" xmlns="http://www.w3.org/2000/svg">
+  <!-- Effet de la valeur "miter-clip" -->
+  <path d="M1,5 l2,-3 l2,3" stroke="black" fill="none"
+        stroke-linejoin="miter-clip" />
+
+  <!-- Effet de la valeur "miter-clip" sur un angle aigu
+       où la limite stroke-miterlimit est dépassée -->
+  <path d="M7,5 l0.75,-3 l0.75,3" stroke="black" fill="none"
+        stroke-linejoin="miter-clip" />
+
+  <!-- Ligne rouge pointillé qui indique la limite
+       à partir de laquelle le coin sera tronqué -->
+  <path d="M0,0 h10" stroke="red" stroke-dasharray="0.05"  stroke-width="0.025"/>
+
+  <!--
+  Lignes roses qui indiquent la position
+  du chemin pour chaque trait
+  -->
+  <g>
+    <path d="M1,5 l2,-3 l2,3" stroke="pink" fill="none" stroke-width="0.025" />
+    <circle cx="1" cy="5" r="0.05" fill="pink" />
+    <circle cx="3" cy="2" r="0.05" fill="pink" />
+    <circle cx="5" cy="5" r="0.05" fill="pink" />
+
+    <path d="M7,5 l0.75,-3 l0.75,3" stroke="pink" fill="none" stroke-width="0.025" />
+    <circle cx="7"    cy="5" r="0.05" fill="pink" />
+    <circle cx="7.75" cy="2" r="0.05" fill="pink" />
+    <circle cx="8.5"  cy="5" r="0.05" fill="pink" />
+  </g>
+</svg>
+ +

{{EmbedLiveSample('miter-clip', '100%', 200)}}

+ +

round

+ +

La valeur round indique qu'un coin arrondi est utilisé pour joindre les segments du chemin.

+ +

Exemple

+ + + +
<svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
+  <!-- Effet de la valeur "round" -->
+  <path d="M1,5 l2,-3 l2,3" stroke="black" fill="none"
+        stroke-linejoin="round" />
+
+  <!--
+  Lignes roses qui indiquent la position
+  du chemin pour chaque trait
+  -->
+  <g id="p">
+    <path d="M1,5 l2,-3 l2,3"
+          stroke="pink" fill="none" stroke-width="0.025" />
+    <circle cx="1" cy="5" r="0.05" fill="pink" />
+    <circle cx="3" cy="2" r="0.05" fill="pink" />
+    <circle cx="5" cy="5" r="0.05" fill="pink" />
+  </g>
+</svg>
+ +

{{EmbedLiveSample('round', '100%', 200)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("SVG2", "painting.html#StrokeLinejoinProperty", "stroke-linejoin")}}{{Spec2("SVG2")}}Définition pour les formes et le texte
{{SpecName("SVG1.1", "painting.html#StrokeLinejoinProperty", "stroke-linejoin")}}{{Spec2("SVG1.1")}}Définition initiale pour les formes et le texte
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.attributes.presentation.stroke-linejoin")}}

diff --git a/files/fr/web/svg/attribute/stroke-miterlimit/index.html b/files/fr/web/svg/attribute/stroke-miterlimit/index.html new file mode 100644 index 0000000000..350ce47e36 --- /dev/null +++ b/files/fr/web/svg/attribute/stroke-miterlimit/index.html @@ -0,0 +1,116 @@ +--- +title: stroke-miterlimit +slug: Web/SVG/Attribute/stroke-miterlimit +tags: + - SVG + - SVG Attribute +translation_of: Web/SVG/Attribute/stroke-miterlimit +--- +
{{SVGRef}}
+ +

L'attribut stroke-miterlimit définit la limite du rapport entre la longueur du coin et la valeur de {{ SVGAttr("stroke-width") }} utilisée pour dessiner la liaison entre deux segments de ligne. Quand la limite est dépassée, la liaison passe du type miter (pointu) au type bevel (biseauté).

+ +

Note: L'attribut stroke-miterlimit étant un attribut de présentation, il peut être utilisé comme propriété CSS.

+ +

Cet attribut peut être appliqué à n'importe quel élément, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}

+ +
+ + +
<svg viewBox="0 0 38 30" xmlns="http://www.w3.org/2000/svg">
+  <!-- Impact du miterlimit par défaut -->
+  <path stroke="black" fill="none" stroke-linejoin="miter" id="p1"
+        d="M1,9 l7   ,-3 l7   ,3
+           m2,0 l3.5 ,-3 l3.5 ,3
+           m2,0 l2   ,-3 l2   ,3
+           m2,0 l0.75,-3 l0.75,3
+           m2,0 l0.5 ,-3 l0.5 ,3" />
+
+  <!-- Impact du miterlimit le plus petit (1) -->
+  <path stroke="black" fill="none" stroke-linejoin="miter"
+        stroke-miterlimit="1" id="p2"
+        d="M1,19 l7   ,-3 l7   ,3
+           m2, 0 l3.5 ,-3 l3.5 ,3
+           m2, 0 l2   ,-3 l2   ,3
+           m2, 0 l0.75,-3 l0.75,3
+           m2, 0 l0.5 ,-3 l0.5 ,3" />
+
+  <!-- Impact d'un large miterlimit (8) -->
+  <path stroke="black" fill="none" stroke-linejoin="miter"
+        stroke-miterlimit="8" id="p3"
+        d="M1,29 l7   ,-3 l7   ,3
+           m2, 0 l3.5 ,-3 l3.5 ,3
+           m2, 0 l2   ,-3 l2   ,3
+           m2, 0 l0.75,-3 l0.75,3
+           m2, 0 l0.5 ,-3 l0.5 ,3" />
+
+  <!-- Les lignes roses suivantes indiquent la position du chemin pour chaque trait -->
+  <path stroke="pink" fill="none" stroke-width="0.05"
+        d="M1, 9 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3
+           M1,19 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3
+           M1,29 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
+</svg>
+ +

{{EmbedLiveSample('topExample', '100%', 400)}}

+
+ +

Quand deux segments de ligne se recontrent en angle aigu, et la liaison définit par {{ SVGAttr("stroke-linejoin") }} vaut miter, il est possible que le coin s'étende bien au-delà de l'épaisseur de la ligne du contour. Le ratio stroke-miterlimit est utilisé pour définir une limite à partir de laquelle la liaison est convertie de miter à bevel.

+ +

Le rapport entre la longueur du coin (distance entre le côté intérieur et le côté externe du coin) et {{ SVGAttr("stroke-width") }} est directement lié à l'angle (θ) entre les segments, tel que décrit par cette formule:

+ +

stroke-miterlimit = miterLength stroke-width = 1 sin ( θ 2 )

+ +

Par exemple, une limite de 1.414 convertit une liaison miter en bevel pour les angles de moins de 90 degrés, une limite de 4.0 pour les angles de moins de 29 degrés, et une limite de 10.0 pour les angles de moins de 11.5 degrés environ.

+ +

Contexte d'utilisation

+ + + + + + + + + + + + + + + + +
Valeur<number>
Valeur par défaut4
AnimationOui
+ +

La valeur de stroke-miterlimit doit être supérieure ou égale à 1.

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.attributes.presentation.stroke-miterlimit")}}

+ +

Spécification

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("SVG2", "painting.html#StrokeMiterlimitProperty", "stroke-miterlimit")}}{{Spec2("SVG2")}}Définition pour les formes et le texte
{{SpecName("SVG1.1", "painting.html#StrokeMiterlimitProperty", "stroke-miterlimit")}}{{Spec2("SVG1.1")}}Définition initiale pour les formes et le texte
diff --git a/files/fr/web/svg/attribute/stroke-opacity/index.html b/files/fr/web/svg/attribute/stroke-opacity/index.html new file mode 100644 index 0000000000..dbddc5f78f --- /dev/null +++ b/files/fr/web/svg/attribute/stroke-opacity/index.html @@ -0,0 +1,93 @@ +--- +title: stroke-opacity +slug: Web/SVG/Attribute/stroke-opacity +tags: + - SVG + - SVG Attribute +translation_of: Web/SVG/Attribute/stroke-opacity +--- +
{{SVGRef}}
+ +

L'attribut stroke-opacity définit l'opacité du contour (couleur, dégradé, motif, etc) appliqué à une forme SVG.

+ +

Note: stroke-opacity étant un attribut de présentation, il peut être utilisé comme propriété CSS.

+ +

Cet attribut peut être appliqué à tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}

+ +
+ + +
<svg viewBox="0 0 40 10" xmlns="http://www.w3.org/2000/svg">
+  <!-- Opacité par défaut: 1 -->
+  <circle cx="5" cy="5" r="4" stroke="green" />
+
+  <!-- Définit l'opacité avec un nombre entre 0 et 1-->
+  <circle cx="15" cy="5" r="4" stroke="green"
+          stroke-opacity="0.7" />
+
+  <!-- Définit l'opacité avec un pourcentage -->
+  <circle cx="25" cy="5" r="4" stroke="green"
+          stroke-opacity="50%" />
+
+  <!-- Définit l'opacité comme propriété CSS -->
+  <circle cx="35" cy="5" r="4" stroke="green"
+          style="stroke-opacity: .3;" />
+</svg>
+ +

{{EmbedLiveSample('topExample', '100%', 150)}}

+
+ +

Notes d'usage

+ + + + + + + + + + + + + + + + +
Valeur[0-1] | <percentage>
Valeur par défaut1
AnimationOui
+ +

Note: SVG2 introduit les valeurs en pourcentage pour stroke-opacity, Cependant, ce n'est pas souvent pris en charge. pour le moment (voir {{anch("Compatibilité des navigateurs")}} ci-dessous), il est par conséquent recommendé d'utiliser les valeurs de l'intervalle [0-1].

+ +

Il est important de savoir que le contour recouvre partiellement le remplissage d'une forme. Ainsi, un contour avec une opacité différente de 1 affichera partiellement le remplissage du dessous. Pour éviter cet effet, il est possible d'appliquer une opacité globale avec l'attribut {{SVGAttr('opacity')}} ou placer le contour derrière le remplissage avec {{SVGAttr('paint-order')}}.

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.attributes.presentation.stroke-opacity")}}

+ +

Spécification

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("SVG2", "painting.html#StrokeOpacityProperty", "stroke-opacity")}}{{Spec2("SVG2")}}Définition pour les formes et le texte
{{SpecName("SVG1.1", "painting.html#StrokeOpacityProperty", "stroke-opacity")}}{{Spec2("SVG1.1")}}Définition initiale pour les formes et le texte
diff --git a/files/fr/web/svg/attribute/stroke-width/index.html b/files/fr/web/svg/attribute/stroke-width/index.html new file mode 100644 index 0000000000..2850964c73 --- /dev/null +++ b/files/fr/web/svg/attribute/stroke-width/index.html @@ -0,0 +1,93 @@ +--- +title: stroke-width +slug: Web/SVG/Attribute/stroke-width +tags: + - SVG + - SVG Attribute +translation_of: Web/SVG/Attribute/stroke-width +--- +
{{SVGRef}}
+ +

L'attribut stroke-width définit l'épaisseur du contour à appliquer à une forme SVG.

+ +

Note: stroke-width étant un attribut de présentation, il peut être utilisé comme propriété CSS.

+ +

Cet attribut peut être appliqué à tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}

+ +
+ + +
<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
+  <!-- Épaisseur par défaut: 1 -->
+  <circle cx="5" cy="5" r="3" stroke="green" />
+
+  <!-- Définit l'épaisseur avec un nombre -->
+  <circle cx="15" cy="5" r="3" stroke="green"
+          stroke-width="3" />
+
+  <!-- Définit l'épaisseur avec un pourcentage -->
+  <circle cx="25" cy="5" r="3" stroke="green"
+          stroke-width="2%" />
+</svg>
+ +

{{EmbedLiveSample('topExample', '100%', 150)}}

+
+ +

Notes d'usage

+ + + + + + + + + + + + + + + + +
Valeur<length> | <percentage>
Valeur par défaut1px
AnimationOui
+ +

Note: SVG2 introduit les valeurs en pourcentage pour stroke-width, Cependant, ce n'est pas souvent pris en charge pour le moment (voir {{anch('Compatibilité des navigateurs')}} ci-dessous). Il est par conséquent recommandé d'utiliser les valeurs de l'intervalle [0-1].

+ +

Une valeur en pourcentage est toujours calculée en tant que pourcentage de la longueur diagonale {{SVGAttr('viewBox')}} normalisée.

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.attributes.presentation.stroke-width")}}

+ +

Spécification

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("SVG2", "painting.html#StrokeWidthProperty", "stroke-width")}}{{Spec2("SVG2")}} +

Définition pour les formes et le texte

+ + +
{{SpecName("SVG1.1", "painting.html#StrokeWidthProperty", "stroke-width")}}{{Spec2("SVG1.1")}}Définition initiale pour les formes et le texte
diff --git a/files/fr/web/svg/attribute/stroke/index.html b/files/fr/web/svg/attribute/stroke/index.html new file mode 100644 index 0000000000..9e8c7fa1ba --- /dev/null +++ b/files/fr/web/svg/attribute/stroke/index.html @@ -0,0 +1,93 @@ +--- +title: stroke +slug: Web/SVG/Attribute/stroke +tags: + - Attribut SVG + - SVG +translation_of: Web/SVG/Attribute/stroke +--- +
{{SVGRef}}
+ +

L'attribut stroke définit la couleur (ou n'importe quelle méthode de remplissage, comme un gradient ou motif) a utiliser pour dessiner le contour d'une forme SVG.

+ +

Note: stroke étant un attribut de présentation, il peut être utilisé comme propriété CSS.

+ +

Cet attribut peut être appliqué à tout élément, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}

+ +
+ + +
<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
+
+  <!-- Simple trait de couleur -->
+  <circle cx="5" cy="5" r="4" fill="none"
+          stroke="green" />
+
+  <!-- Utiliser un degradé comme contour -->
+  <defs>
+    <linearGradient id="myGradient">
+      <stop offset="0%"   stop-color="green" />
+      <stop offset="100%" stop-color="white" />
+    </linearGradient>
+  </defs>
+  <circle cx="15" cy="5" r="4" fill="none"
+          stroke="url(#myGradient)" />
+</svg>
+
+ +

{{EmbedLiveSample('topExample', '100%', 200)}}

+
+ +

Notes d'usage

+ + + + + + + + + + + + + + + + +
Valeur<paint>
Valeur par défautnone
AnimationOui
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("SVG2", "painting.html#StrokeProperty", "stroke")}}{{Spec2("SVG2")}}Définition pour les formes et le texte.
+ Ajoute context-fill et context-stroke.
{{SpecName("SVG1.1", "painting.html#StrokeProperty", "stroke")}}{{Spec2("SVG1.1")}}Définiton initiale pour les formes et le texte
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.attributes.presentation.stroke")}}

+ +

Note: Pour plus d'informations sur les valeurs de context-stroke (et context-fill) à partir de documents HTML, voir la documentation pour la propriété non-standard {{cssxref("-moz-context-properties")}}.

diff --git a/files/fr/web/svg/attribute/style/index.html b/files/fr/web/svg/attribute/style/index.html new file mode 100644 index 0000000000..58bb5061ae --- /dev/null +++ b/files/fr/web/svg/attribute/style/index.html @@ -0,0 +1,85 @@ +--- +title: style +slug: Web/SVG/Attribute/style +tags: + - Reference + - SVG + - SVG Attribute +translation_of: Web/SVG/Attribute/style +--- +

{{SVGRef}}

+ +

L'attribut style définit les informations de style pour son élément. Il fonctionne de manière identique à l'attribut style en HTML.

+ +

Context d'utilisation

+ + + + + + + + + + + + + + + + + + + + +
CatégoriesAttribut de présentation
Valeur<style>
AnimationNon
Document normatifSVG 1.1 (2ème Edition)
+ +
+
<style>
+
La syntaxe des données de style dépend du langage de la feuille de style. Par défaut, le langage est CSS.
+
+

Note: En théorie, l'attribut {{SVGAttr("contentStyleType")}} pourrait être utilisé pour spécifier un language de style autre que CSS, comme XSL(T). Cependant, cela n'a jamais été implémenté de manière satisfaisante dans les navigateurs, donc ne vous y fiez pas.

+
+
+ +

Exemple

+ +

L'exemple suivant stylise le rectangle en utilisant l'attribut style, avec CSS comme langage de feuille de style.

+ +
<svg viewbox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg">
+  <rect height="300" width="600" x="200" y="100"
+     style="fill: red; stroke: blue; stroke-width: 3"/>
+</svg>
+
+ +

Éléments

+ +

Les éléments suivants peuvent utiliser l'attribut style:

+ + + +

Voir aussi

+ + + +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.attributes.style.style")}}

diff --git a/files/fr/web/svg/attribute/styling/index.html b/files/fr/web/svg/attribute/styling/index.html new file mode 100644 index 0000000000..e959ac277b --- /dev/null +++ b/files/fr/web/svg/attribute/styling/index.html @@ -0,0 +1,32 @@ +--- +title: Attributs SVG de style +slug: Web/SVG/Attribute/Styling +translation_of: Web/SVG/Attribute/Styling +--- +

Les attributs SVG de style sont tous les attributs qui peuvent être spécifiés sur tout élément SVG pour appliquer des styles CSS.

+ +
+ +
+ +

Attributs

+ +
+
{{SVGAttr('class')}}
+
Assigne un nom de classe ou un ensemble de noms de classe à un élément. Il fonctionne de manière identique à l'attribut {{htmlattrxref('class')}} en HTML.
+ Valeur: Tout ID valide; Animation: Oui
+
{{SVGAttr('style')}}
+
Spécifie les informations de style d'un élément. Il fonctionne de manière identique à l'attribut {{htmlattrxref('style')}} en HTML.
+ Valeur: Toute chaîne de caractères valide; Animation: Non +

 

+
+
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.attributes.style")}}

diff --git a/files/fr/web/svg/attribute/text-anchor/index.html b/files/fr/web/svg/attribute/text-anchor/index.html new file mode 100644 index 0000000000..3ac25fe5db --- /dev/null +++ b/files/fr/web/svg/attribute/text-anchor/index.html @@ -0,0 +1,93 @@ +--- +title: text-anchor +slug: Web/SVG/Attribute/text-anchor +tags: + - Attribut SVG + - NeedsCompatTable + - SVG + - SVG Attribute +translation_of: Web/SVG/Attribute/text-anchor +--- +

« Référence des attributs SVG

+ +

L'attribut text-anchor est utilisé pour aligner un élément text par rapport à un point dont la position est définie au début "start", au milieu "middle" ou à la fin "end" de son contenu.

+ +

text-anchor s'applique à chaque morceau de texte (voir "text-chunks" (anglais)) d'un élément text donné. Chaque morceau de texte a une position initiale courante qui est représentée par un point dans le référentiel de coordonnées de l'utilisateur déterminée selon le contexte : par les valeurs des attributs {{ SVGAttr("x") }} et {{ SVGAttr("y") }} sur un élément {{ SVGElement("text") }}, par la position du premier caractère affiché d'un morceau de texte pour un élément {{ SVGElement("tspan") }}, {{ SVGElement("tref") }} ou {{ SVGElement("altGlyph") }} quels que soient les valeurs de ses attributs {{ SVGAttr("x") }} ou {{ SVGAttr("y") }} ou à la position initiale du texte d'un élément {{ SVGElement("textPath") }}.

+ +

En tant qu'attribut de présentation, il peut aussi être utilisé directement comme une propriété dans une feuille de style CSS.

+ +

Contexte d'utilisation

+ + + + + + + + + + + + + + + + + + + + +
CatégoriesAttribut de présentation
Valeurstart | middle | end | inherit
AnimableOui
Document de spécificationSVG 1.1 (2ème Édition) (anglais)
+ +
+
start
+
Les caractères affichés sont alignés de manière à ce que le début du texte soit au même point que la position initiale du texte. Cela produit l'équivalent d'un alignement à gauche du texte latin dans son orientation usuelle (horizontale de gauche à droite). Pour les écritures de droite à gauche comme l'hébreu et l'arabe, c'est alors l'équivalent d'un alignement à droite. Pour certains textes asiatiques avec une orientation verticale de haut en bas, le résultat sera alors comparable à un alignement en haut.
+
middle
+
Les caractères sont affichés de manière à ce que le milieu du texte affiché soit la position initiale du texte. (Pour du texte sur un chemin textPath, le texte est dans un premier temps organisé virtuellement selon une ligne droite. Le point équidistant des extrémités horizontales du texte est alors déterminé. Puis, le texte est projeté sur le chemin textPath avec le point calculé précédemment placé à la position courante du texte.)
+
end
+
Les caractères sont alignés de sorte que la fin du texte soit au même point que la position initiale du texte. Cela produit l'équivalent d'un alignement à droite du texte latin dans son orientation usuelle (horizontale de gauche à droite). Pour les écritures de droite à gauche comme l'hébreu et l'arabe, c'est alors l'équivalent d'un alignement à gauche.
+
+ +

Exemple

+ +
<?xml version="1.0"?>
+<svg width="120" height="120" viewBox="0 0 120 120"
+     xmlns="http://www.w3.org/2000/svg" version="1.1">
+
+    <!-- Materialisation of anchors -->
+    <path d="M60,15 L60,110 M30,40 L90,40 M30,75 L90,75 M30,110 L90,110" stroke="grey" />
+
+
+    <!-- Anchors in action -->
+    <text text-anchor="start"
+          x="60" y="40">A</text>
+
+    <text text-anchor="middle"
+          x="60" y="75">A</text>
+
+    <text text-anchor="end"
+          x="60" y="110">A</text>
+
+    <!-- Materialisation of anchors -->
+    <circle cx="60" cy="40" r="3" fill="red" />
+    <circle cx="60" cy="75" r="3" fill="red" />
+    <circle cx="60" cy="110" r="3" fill="red" />
+
+<style><![CDATA[
+text{
+    font: bold 36px Verdana, Helvetica, Arial, sans-serif;
+}
+]]></style>
+</svg>
+ +

Résultat

+ +

+ +

Éléments

+ +

Les éléments suivants ont l'attribut text-anchor

+ + diff --git a/files/fr/web/svg/attribute/transform/index.html b/files/fr/web/svg/attribute/transform/index.html new file mode 100644 index 0000000000..e8b3843ed2 --- /dev/null +++ b/files/fr/web/svg/attribute/transform/index.html @@ -0,0 +1,264 @@ +--- +title: transform +slug: Web/SVG/Attribute/transform +tags: + - Attribut + - SVG +translation_of: Web/SVG/Attribute/transform +--- +
{{SVGRef}}
+ +

L'attribut transform définit une liste de définitions de transformation qui sont appliquées à l'élément ainsi qu'à ses éléments fils.

+ +
+ + +
<svg viewBox="-40 0 150 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g fill="grey"
+     transform="rotate(-10 50 100)
+                translate(-36 45.5)
+                skewX(40)
+                scale(1 0.5)">
+    <path id="heart" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" />
+  </g>
+
+  <use xlink:href="#heart" fill="none" stroke="red"/>
+</svg>
+
+ +

{{EmbedLiveSample('topExample', '100%', 200)}}

+
+ +

Note : Pour SVG2, transform est un attribut de présentation et peut donc être utilisé comme une propriété CSS. Attention toutefois aux différences de syntaxe entre la propriété CSS et cet attribut. Voir la documentation de la propriété {{cssxref('transform')}} pour la syntaxe .

+ +

En tant qu'attribut de présentation, transform peut être utilisé par n'importe quel élément (en SVG 1.1, seuls les 16 éléments suivants pouvaient l'utiliser : {{SVGElement('a')}}, {{SVGElement('circle')}}, {{SVGElement('clipPath')}}, {{SVGElement('defs')}}, {{SVGElement('ellipse')}}, {{SVGElement('foreignObject')}}, {{SVGElement('g')}}, {{SVGElement('image')}}, {{SVGElement('line')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('switch')}}, {{SVGElement('text')}} et {{SVGElement('use')}}).

+ +

Pour des raisons historiques liées à SVG 1.1, {{SVGElement('linearGradient')}} et {{SVGElement('radialGradient')}} prennent en charge l'attribut gradientTransform et {{SVGElement('pattern')}} permet d'utiliser patternTransform. Ces deux attributs sont exactement synonymes de l'attribut transform.

+ + + + + + + + + + + + + + + + +
Valeur<transform-list>
Valeur par défautnone
Peut être animéOui
+ +

Fonctions de transformation

+ +

Les fonctions de transformation suivantes peuvent être utilisées par l'attribut transform.

+ +

Attention ! Selon la spécification, on devrait également pouvoit utiliser les fonctions CSS {{cssxref('transform-function', 'transform functions')}} mais la compatibilité n'est pas assurée.

+ +

matrix()

+ +

La fonction de transformation matrix(<a> <b> <c> <d> <e> <f>) permet d'appliquer une transformation géométrique décrite par 6 coefficients et matrix(a,b,c,d,e,f) sera équivalent à la matrice de transformation mathématique :(acebdf001)\begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix}Le calcul des coordonnées s'obtient de la façon suivante :(xnewCoordSysynewCoordSys1)=(acebdf001)(xprevCoordSysyprevCoordSys1)=(axprevCoordSys+cyprevCoordSys+ebxprevCoordSys+dyprevCoordSys+f1) \begin{pmatrix} x_{\mathrm{newCoordSys}} \\ y_{\mathrm{newCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} x_{\mathrm{prevCoordSys}} \\ y_{\mathrm{prevCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a x_{\mathrm{prevCoordSys}} + c y_{\mathrm{prevCoordSys}} + e \\ b x_{\mathrm{prevCoordSys}} + d y_{\mathrm{prevCoordSys}} + f \\ 1 \end{pmatrix}

+ +

Exemples

+ + + +
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <rect x="10" y="10" width="30" height="20" fill="green" />
+
+  <!--
+  Dans l'exemple suivant, on applique la matrice suivante:
+  [a c e]    [3 -1 30]
+  [b d f] => [1  3 40]
+  [0 0 1]    [0  0  1]
+
+  qui transforme le rectangle de cette façon:
+
+  top left corner: oldX=10 oldY=10
+  newX = a * oldX + c * oldY + e = 3 * 10 - 1 * 10 + 30 = 50
+  newY = b * oldX + d * oldY + f = 1 * 10 + 3 * 10 + 40 = 80
+
+  top right corner: oldX=40 oldY=10
+  newX = a * oldX + c * oldY + e = 3 * 40 - 1 * 10 + 30 = 140
+  newY = b * oldX + d * oldY + f = 1 * 40 + 3 * 10 + 40 = 110
+
+  bottom left corner: oldX=10 oldY=30
+  newX = a * oldX + c * oldY + e = 3 * 10 - 1 * 30 + 30 = 30
+  newY = b * oldX + d * oldY + f = 1 * 10 + 3 * 30 + 40 = 140
+
+  bottom right corner: oldX=40 oldY=30
+  newX = a * oldX + c * oldY + e = 3 * 40 - 1 * 30 + 30 = 120
+  newY = b * oldX + d * oldY + f = 1 * 40 + 3 * 30 + 40 = 170
+  -->
+  <rect x="10" y="10" width="30" height="20" fill="red"
+        transform="matrix(3 1 -1 3 30 40)" />
+</svg>
+ +

{{EmbedLiveSample('matrix()', '100%', 200)}}

+ +

translate()

+ +

La fonction de transformation translate(<x> [<y>]) permet de déplacer un objet de x sur l'axe horizontal et de y sur l'axe vertical (i.e. xnew = xold + <x>, ynew = yold + <y>). Si y n'est pas fourni, la valeur par défaut est 0.

+ +

Exemples

+ + + +
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <!-- Pas de translation -->
+  <rect x="5" y="5" width="40" height="40" fill="green" />
+
+  <!-- Translation horizontale -->
+  <rect x="5" y="5" width="40" height="40" fill="blue"
+        transform="translate(50)" />
+
+  <!-- Translation verticale -->
+  <rect x="5" y="5" width="40" height="40" fill="red"
+        transform="translate(0 50)" />
+
+  <!-- Translation horizontale et verticale -->
+  <rect x="5" y="5" width="40" height="40" fill="yellow"
+         transform="translate(50,50)" />
+</svg>
+ +

{{EmbedLiveSample('translate()', '100%', 200)}}

+ +

scale()

+ +

La fonction de transformation scale(<x> [<y>]) définit une homothétie d'un facteur x en horizontal et d'un facteur y en vertical. Si la valeur y n'est pas fournie, on considère qu'elle est égale à x.

+ +

Exemples

+ + + +
<svg viewBox="-50 -50 100 100" xmlns="http://www.w3.org/2000/svg">
+  <!-- uniform scale -->
+  <circle cx="0" cy="0" r="10" fill="red"
+          transform="scale(4)" />
+
+  <!-- vertical scale -->
+  <circle cx="0" cy="0" r="10" fill="yellow"
+          transform="scale(1,4)" />
+
+  <!-- horizontal scale -->
+  <circle cx="0" cy="0" r="10" fill="pink"
+          transform="scale(4,1)" />
+
+  <!-- No scale -->
+  <circle cx="0" cy="0" r="10" fill="black" />
+</svg>
+ +

{{EmbedLiveSample('scale()', '100%', 200)}}

+ +

rotate()

+ +

La fonction de transformation rotate(<a> [<x> <y>]) définit une rotation de a degrés autour d'un point de coordonnées x et y. Si les paramètres optionnels x et y ne sont pas fournis, la rotation est effectuée autour de l'origine dans le système de coordonnés actuel.

+ +

Exemples

+ + + +
<svg viewBox="-12 -2 34 14" xmlns="http://www.w3.org/2000/svg">
+  <rect x="0" y="0" width="10" height="10" />
+
+  <!-- rotation is done around the point 0,0 -->
+  <rect x="0" y="0" width="10" height="10" fill="red"
+        transform="rotate(100)" />
+
+  <!-- rotation is done around the point 10,10 -->
+  <rect x="0" y="0" width="10" height="10" fill="green"
+        transform="rotate(100,10,10)" />
+</svg>
+ +

{{EmbedLiveSample('rotate()', '100%', 200)}}

+ +

skewX()

+ +

La fonction de transformation skewX(<a>) définit une distorsion horizontale de a degrés.

+ +

Exemples

+ + + +
<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
+  <rect x="-3" y="-3" width="6" height="6" />
+
+  <rect x="-3" y="-3" width="6" height="6" fill="red"
+        transform="skewX(30)" />
+</svg>
+ +

{{EmbedLiveSample('skewX()', '100%', 200)}}

+ +

skewY()

+ +

La fonction de transformation skewY(<a>) définit une distorsion verticale de a degrés.

+ +

Exemples

+ + + +
<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
+  <rect x="-3" y="-3" width="6" height="6" />
+
+  <rect x="-3" y="-3" width="6" height="6" fill="red"
+        transform="skewY(30)" />
+</svg>
+ +

{{EmbedLiveSample('skewY()', '100%', 200)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS Transforms 2', '#svg-transform', 'transform')}}{{Spec2('CSS Transforms 2')}}
{{SpecName('CSS3 Transforms', '#svg-transform', 'transform')}}{{Spec2('CSS3 Transforms')}}
{{SpecName("SVG2", "coords.html#TransformProperty", "transform")}}{{Spec2("SVG2")}}
{{SpecName("SVG1.1", "coords.html#TransformAttribute", "transform")}}{{Spec2("SVG1.1")}}Définition initiale.
diff --git a/files/fr/web/svg/attribute/viewbox/index.html b/files/fr/web/svg/attribute/viewbox/index.html new file mode 100644 index 0000000000..a0e011419f --- /dev/null +++ b/files/fr/web/svg/attribute/viewbox/index.html @@ -0,0 +1,67 @@ +--- +title: viewBox +slug: Web/SVG/Attribute/viewBox +tags: + - Attributs SVG + - SVG +translation_of: Web/SVG/Attribute/viewBox +--- +

« Sommaire de la référence des attributs SVG

+ +

L'attribut viewBox permet de spécifier qu'un groupe d'éléments graphiques s'étire afin de s'adapter à un élément conteneur.

+ +

La valeur de l'attribut viewBox est une liste de quatre nombres min-x, min-y, width et height, séparés par des espaces ou/et des virgules. Ces nombres spécifient un rectangle dans l'espace utilisateur, qui doit correspondre aux coins du viewport établis par l'élément SVG donné, ceci en prenant en compte l'attribut {{ SVGAttr("preserveAspectRatio") }}.

+ +

Les valeurs négatives de width et height ne sont pas autorisées et une valeur à zéro désactive le rendu de l'élément.

+ +

Contexte d'utilisation

+ + + + + + + + + + + + + + + + + + + + +
CatégoriesAucune
ValeurVoir ci-dessus
AnimableOui
Document de normeSVG 1.1 (2nd Edition)
+ +

Exemple

+ +

Nous créons ici un viewport de 300×200 unités, ce qui fait que chaque unité de l'élément SVG correspondra à une unité du viewport. On aura donc un élément SVG dont le système de coordonnée ira de 0 à 300 en largeur et de 0 à 200 en hauteur :

+ +

<svg width="300" height="200"></svg>

+ +

En ajoutant une notion de viewbox, nous transformons ce système de coordonnées afin qu'il aille de 0 à w à l'horizontale et de 0 à h à la verticale. Ici, ce sera donc 300/30 (=10) en x ce qui équivaut à 10 unités d'élément SVG pour 1 unité du viewport :

+ +

<svg width="300" height="200" viewBox="0 0 30 20"></svg>

+ +

Elements

+ +

Les éléments suivants peuvent utiliser l'attribut viewBox

+ + + +

Voir également

+ + diff --git a/files/fr/web/svg/attribute/width/index.html b/files/fr/web/svg/attribute/width/index.html new file mode 100644 index 0000000000..fe3a191725 --- /dev/null +++ b/files/fr/web/svg/attribute/width/index.html @@ -0,0 +1,68 @@ +--- +title: Width +slug: Web/SVG/Attribute/width +translation_of: Web/SVG/Attribute/width +--- +

« SVG Attribute reference home

+ +

Cet attribut indique une dimension horizontale <length> dans le système de coordonnées. La donnée (ou coordonnée) définie par cet attribut dépend de l'élément sur lequel il est appliqué. La plupart du temps, il représente la largeur de la région rectangulaire composant l'élément (voir les exceptions dans la documentation pour chaque type d'élément).

+ +

Cet attribut doit être spécifié, hormis pour les éléments {{ SVGElement("svg") }} dont la valeur par défaut est de 100% (exepté pour l'élément racine {{ SVGElement("svg") }} qui possède un parent HTML),  {{ SVGElement("filter") }} et {{ SVGElement("mask") }} dont la valeur par défaut est de 120%.

+ +

Contexte d'utilisation

+ + + + + + + + + + + + + + + + + + + + +
CatégoriesAucune
Valeur<length>
AnimableOui
Document normatifSVG 1.1 (2nd Edition): foreignObject element
+ SVG 1.1 (2nd Edition): image element
+ SVG 1.1 (2nd Edition): pattern element
+ SVG 1.1 (2nd Edition): rect element
+ SVG 1.1 (2nd Edition): svg element
+ SVG 1.1 (2nd Edition): use element
+ SVG 1.1 (2nd Edition): Filter primitive
+ SVG 1.1 (2nd Edition): mask element
+ +

{{ page("fr/docs/Web/SVG/Content_type","Length") }}

+ +

Exemple

+ +
<?xml version="1.0"?>
+<svg width="120" height="120"
+     viewBox="0 0 120 120"
+     xmlns="http://www.w3.org/2000/svg">
+
+  <rect x="10" y="10" width="100" height="100"/>
+</svg>
+ +

Eléments

+ +

Les éléments suivants peuvent utiliser l'attribut width :

+ + diff --git a/files/fr/web/svg/attribute/x/index.html b/files/fr/web/svg/attribute/x/index.html new file mode 100644 index 0000000000..86786e50e3 --- /dev/null +++ b/files/fr/web/svg/attribute/x/index.html @@ -0,0 +1,88 @@ +--- +title: x +slug: Web/SVG/Attribute/x +tags: + - Attribut + - NeedsCompatTable + - NeedsUpdate + - SVG +translation_of: Web/SVG/Attribute/x +--- +
{{SVGRef}}
+ +

L'attribut x indique une coordonnée en x pour le système des coordonnées de l'utilisateur. L'effet de cette coordonnée dépend de l'élément sur lequel elle est utilisée. La plupart du temps, elle représente l'abscisse du coin en haut à gauche de la région rectangulaire pour l'élément. Cet attribut a la même syntaxe que <length>

+ +

Si cet attribut n'est pas défini, on aura le même effet que si on avait utilisé la valeur 0. Les éléments {{SVGElement("filter")}} et {{SVGElement("mask")}} font exception à cette règle, la valeur par défaut pour cet attribut est ici -10%.

+ +

Contexte d'utilisation

+ + + + + + + + + + + + + + + + + + + + +
CatégoriesAucune
Type de valeur<coordinate>
Peut être animéeOui
SpécificationsSVG 1.1 (seconde édition) : élément altGlyph
+ SVG 1.1 (seconde édition) : élément cursor
+ SVG 1.1 (seconde édition) : élément fePointLight
+ SVG 1.1 (seconde édition) : élément feSpotLight
+ SVG 1.1 (seconde édition) : élément filter
+ SVG 1.1 (seconde édition) : élément foreignObject
+ SVG 1.1 (seconde édition) : élément glyphRef
+ SVG 1.1 (seconde édition) : élément image
+ SVG 1.1 (seconde édition) : élément pattern
+ SVG 1.1 (seconde édition) : élément rect
+ SVG 1.1 (seconde édition) : élément svg
+ SVG 1.1 (seconde édition) : élément text
+ SVG 1.1 (seconde édition) : élément use
+ SVG 1.1 (seconde édition) : primitive de filtre
+ SVG 1.1 (seconde édition) : élément mask
+ SVG 1.1 (seconde édition) : élément tspan
+ +

{{page("/fr/docs/Web/SVG/Content_type","coordinate")}}

+ +

Exemples

+ +
<?xml version="1.0"?>
+<svg width="120" height="120"
+     viewBox="0 0 120 120"
+     xmlns="https://www.w3.org/2000/svg">
+
+  <rect x="10" y="10" width="100" height="100"/>
+</svg>
+ +

Éléments

+ +

On peut utiliser l'attribut x sur les éléments suivants :

+ + diff --git a/files/fr/web/svg/element/a/index.html b/files/fr/web/svg/element/a/index.html new file mode 100644 index 0000000000..a33829bf99 --- /dev/null +++ b/files/fr/web/svg/element/a/index.html @@ -0,0 +1,134 @@ +--- +title: a +slug: Web/SVG/Element/a +tags: + - Element + - SVG + - SVG Conteneur +translation_of: Web/SVG/Element/a +--- +
{{SVGRef}}
+ +

L'élément SVG <a> crée un hyperlien vers d'autres pages web, fichiers, emplacements dans la page en cours, adresses email, ou toute autre URL.

+ +

En SVG, l'élément <a> est un conteneur, ce qui veut dire que vous pouvez créer un lien autour du texte comme en HTML, mais que vous pouvez aussi créer un lien autour de n'importe quelle forme.

+ +

Exemple

+ + + +
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <!-- Un lien autour d'une forme -->
+  <a href="https://developer.mozilla.org/docs/Web/SVG/Element/circle">
+    <circle cx="50" cy="40" r="35"/>
+  </a>
+
+  <!-- Un lien autour d'un texte -->
+  <a href="https://developer.mozilla.org/docs/Web/SVG/Element/circle">
+    <text x="50" y="90" text-anchor="middle">
+      &lt;circle&gt;
+    </text>
+  </a>
+</svg>
+ +
/* Comme SVG ne fournit pas de style visuel par défaut pour les liens,
+   il est en recommendé d'en ajouter manuellement */
+
+@namespace svgns url(http://www.w3.org/2000/svg);
+
+svgns|a {
+  cursor: pointer;
+}
+
+svgns|a text {
+  fill: blue; /* Même pour du texte, SVG utilise fill plutôt que color */
+  text-decoration: underline;
+}
+
+svgns|a:hover, svgns|a:active {
+  outline: dotted 1px blue;
+}
+ +

{{EmbedLiveSample('Exemple', 100, 100)}}

+ +
+

Étant donné que cet élément partage son nom de balise avec l'élément HTML <a>, la sélection de "a" avec CSS ou querySelector peut s'appliquer au mauvais type d'élément. La règle @namespace permet de faire la distinction entre les deux.

+
+ +

Attributs

+ +

 

+ +

Attributs globaux

+ + + +

Attributs spécifiques

+ + + +

Contexte d'utilisation

+ +

{{svginfo}}

+ +

Interface DOM

+ +

Cet élément implémente l'interface SVGAElement.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}{{Spec2('Referrer Policy')}}Ajoute l'attribut referrerpolicy.
{{SpecName("SVG2", "linking.html#Links", "<a>")}}{{Spec2("SVG2")}}Remplace l'attribut {{SVGAttr("xlink:href")}} par {{SVGAttr("href")}}
{{SpecName("SVG1.1", "linking.html#Links", "<a>")}}{{Spec2("SVG1.1")}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.elements.a")}}

diff --git a/files/fr/web/svg/element/altglyph/index.html b/files/fr/web/svg/element/altglyph/index.html new file mode 100644 index 0000000000..0309fc608f --- /dev/null +++ b/files/fr/web/svg/element/altglyph/index.html @@ -0,0 +1,113 @@ +--- +title: altGlyph +slug: Web/SVG/Element/altGlyph +tags: + - Element + - Reference + - SVG +translation_of: Web/SVG/Element/altGlyph +--- +
{{SVGRef}}{{deprecated_header}}
+ +

L'élément altGlyph permet la selection des glyphes utilisées pour restituer un caractère de donnée.
+  

+ +

Contexte d'utilisation

+ +

{{svginfo}}

+ +

Exemple

+ +

Attributs

+ +

Attributs globaux

+ + + +

Attributs spécifiques

+ + + +

Interface DOM

+ +

Cet élément implémente l'interface SVGAltGlyphElement.

+ +

Compatibilité des navigateurs

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari
Support simple1.0{{ CompatGeckoDesktop('2.0') }} [1]{{ CompatUnknown() }}{{ CompatOpera('10.6') }}{{ CompatSafari('4.0') }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Support simple{{ CompatUnknown() }}{{ CompatGeckoMobile('2.0') }} [1]{{ CompatNo() }}{{ CompatOperaMobile('11.0') }}{{ CompatSafari('4.0') }}
+
+ +

[1] support partiel, voir bug 456286 et bug 571808.

+ +

Le graphique est basé sur ces sources.

+ +

Voir également

+ + diff --git a/files/fr/web/svg/element/altglyphdef/index.html b/files/fr/web/svg/element/altglyphdef/index.html new file mode 100644 index 0000000000..26f1616c86 --- /dev/null +++ b/files/fr/web/svg/element/altglyphdef/index.html @@ -0,0 +1,42 @@ +--- +title: altGlyphDef +slug: Web/SVG/Element/altGlyphDef +tags: + - Element + - Reference + - SVG +translation_of: Web/SVG/Element/altGlyphDef +--- +
{{SVGRef}}{{deprecated_header}}
+ +

L'élément altGlyphDef défini une représentation de substitution pour les glyphes.

+ +

Contexte d'utilisation

+ +

{{svginfo}}

+ +

Exemple

+ +

Attributs

+ +

Attributs globaux

+ + + +

Attributs spécifiques

+ +

Aucun

+ +

Interface DOM

+ +

Cet élément implémente l'interface SVGAltGlyphDefElement.

+ +

Voir également

+ + diff --git a/files/fr/web/svg/element/altglyphitem/index.html b/files/fr/web/svg/element/altglyphitem/index.html new file mode 100644 index 0000000000..ddd7465200 --- /dev/null +++ b/files/fr/web/svg/element/altglyphitem/index.html @@ -0,0 +1,44 @@ +--- +title: altGlyphItem +slug: Web/SVG/Element/altGlyphItem +tags: + - Element + - Reference + - SVG +translation_of: Web/SVG/Element/altGlyphItem +--- +
{{SVGRef}}{{deprecated_header}}
+ +

L'élément altGlyphItem fournit un ensemble de candidats pour la substitution de glyphes par l'élément {{ SVGElement("altGlyph") }}.

+ +

Contexte d'utilisation

+ +

{{svginfo}}

+ +

Exemple

+ +

Attributs

+ +

Attributs globaux

+ + + +

Attributs spécifiques

+ +

Aucun

+ +

Interface DOM

+ +

Cet élément implémente l'interface SVGAltGlyphItemElement.

+ +

 

+ +

Voir également

+ + diff --git a/files/fr/web/svg/element/animate/index.html b/files/fr/web/svg/element/animate/index.html new file mode 100644 index 0000000000..0859c08093 --- /dev/null +++ b/files/fr/web/svg/element/animate/index.html @@ -0,0 +1,109 @@ +--- +title: animate +slug: Web/SVG/Element/animate +tags: + - Animation SVG + - Element + - SVG +translation_of: Web/SVG/Element/animate +--- +
{{SVGRef}}
+ +

L'élément SVG <animate> est utilisé pour animer un attribut ou une propriété d'un élément au fil du temps. Il est normalement inséré dans l'élément cible ou référencé par l'attribut href de l'élément.

+ +

Contexte d'utilisation

+ +

{{svginfo}}

+ +

Attributs

+ +

Attributs globaux

+ + + +

Attributs spécifiques

+ + + +

Interface DOM

+ +

Cet élément implémente l'interface SVGAnimateElement.

+ +

Exemple

+ +

SVG

+ +
<?xml version="1.0"?>
+<svg width="120" height="120" viewBox="0 0 120 120" version="1.1"
+     xmlns="http://www.w3.org/2000/svg">
+
+  <rect x="10" y="10" width="100" height="100">
+    <animate attributeType="XML" attributeName="x" from="-100" to="120"
+        dur="10s" repeatCount="indefinite"/>
+  </rect>
+</svg>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple", 120, 120)}}

+ +

Problèmes d'accessibilité

+ +

Les animations qui clignotent peuvent être problématiques pour les personnes ayant des problèmes cognitifs tels que le Trouble du Déficit de l'Attention avec ou sans Hyperactivité (TDAH). De plus, certains types de mouvements peuvent être un élément déclencheur pour les personnes présentant un risque de troubles vestibulaires, d'épilepsie, de migraine et de sensibilité à la scotopie.

+ +

Envisagez de créer un mécanisme permettant de suspendre ou de désactiver l'animation, ainsi que d'utiliser la requête reduced-motion pour améliorer l'expérience des utilisateurs ayant définit pour préférence de ne pas avoir d'animations.

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("SVG Animations 2", "#AnimateElement", "<animate>")}}{{Spec2("SVG Animations 2")}}Aucun changement
{{SpecName("SVG1.1", "animate.html#AnimateElement", "<animate>")}}{{Spec2("SVG1.1")}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.elements.animate")}}

diff --git a/files/fr/web/svg/element/animatecolor/index.html b/files/fr/web/svg/element/animatecolor/index.html new file mode 100644 index 0000000000..f0e0c3023e --- /dev/null +++ b/files/fr/web/svg/element/animatecolor/index.html @@ -0,0 +1,95 @@ +--- +title: animateColor +slug: Web/SVG/Element/animateColor +tags: + - Animation SVG + - Element + - SVG +translation_of: Web/SVG/Element/animateColor +--- +
{{SVGRef}}{{deprecated_header}}
+ +
+

Cet élément est déprécié depuis SVG 1.1 Deuxième édition et peut etre retiré dans une prochaine version de SVG. Il ne fournis pas de fonctionnalités non disponible en utilisant l'élément {{ SVGElement("animate") }}. Il n'est pas implémenté dans Firefox ni dans Internet Explorer. Il est préférable d'utiliser l'élément {{ SVGElement("animate") }} à la place.

+
+ +

L'élément <animateColor> spécifie une transformation de couleur à travers le temps.

+ +

Contexte d'utilisation

+ +

{{svginfo}}

+ +

Attributs

+ +

Attributs globaux

+ + + +

Attributs spécifiques

+ + + +

Interface DOM

+ +

Cet élément implémente l'interface SVGAnimateColorElement.

+ +

Exemple

+ +

SVG

+ +
<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="60" cy="60" r="50">
+    <animateColor attributeName="fill" attributeType="XML"
+        from="black" to="red" dur="6s" repeatCount="indefinite"/>
+  </circle>
+</svg>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple", 120, 120)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("SVG1.1", "animate.html#AnimateColorElement", "<animateColor>")}}{{Spec2("SVG1.1")}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.elements.animateColor")}}

+ +

Voir également

+ + diff --git a/files/fr/web/svg/element/animatemotion/index.html b/files/fr/web/svg/element/animatemotion/index.html new file mode 100644 index 0000000000..40aac45931 --- /dev/null +++ b/files/fr/web/svg/element/animatemotion/index.html @@ -0,0 +1,111 @@ +--- +title: animateMotion +slug: Web/SVG/Element/animateMotion +tags: + - Animation SVG + - Element + - SVG +translation_of: Web/SVG/Element/animateMotion +--- +
{{SVGRef}}
+ +

L'élément <animateMotion> permet d'animer un élément le long d'un chemin donné.

+ +

Contexte d'utilisation

+ +

{{svginfo}}

+ +

Attributs

+ +

Attributs globaux

+ + + +

Attributs spécifiques

+ + + +

Interface DOM

+ +

Cet élément implémente l'interface SVGAnimateMotionElement.

+ +

Exemple

+ +

SVG

+ +
<?xml version="1.0"?>
+<svg width="120" height="120" viewBox="0 0 120 120"
+    xmlns="http://www.w3.org/2000/svg" version="1.1"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+
+  <!-- Dessine le chemin en gris, avec 2 cercles aux extrémités -->
+  <path d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110"
+      stroke="lightgrey" stroke-width="2"
+      fill="none" id="theMotionPath"/>
+  <circle cx="10" cy="110" r="3" fill="lightgrey"  />
+  <circle cx="110" cy="10" r="3" fill="lightgrey"  />
+
+  <!-- Cercle rouge qui sera déplacé le long du chemin. -->
+  <circle cx="" cy="" r="5" fill="red">
+
+    <!-- Définit l'animation -->
+    <animateMotion dur="6s" repeatCount="indefinite">
+      <mpath xlink:href="#theMotionPath"/>
+    </animateMotion>
+  </circle>
+</svg>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple", 120, 120)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("SVG Animations 2", "#AnimateMotionElement", "<animateMotion>")}}{{Spec2("SVG Animations 2")}}Aucun changement
{{SpecName('SVG1.1', 'animate.html#AnimateMotionElement', '<animateMotion>')}}{{Spec2('SVG1.1')}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.elements.animateMotion")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/svg/element/animatetransform/index.html b/files/fr/web/svg/element/animatetransform/index.html new file mode 100644 index 0000000000..06906540c6 --- /dev/null +++ b/files/fr/web/svg/element/animatetransform/index.html @@ -0,0 +1,95 @@ +--- +title: animateTransform +slug: Web/SVG/Element/animateTransform +tags: + - Element + - SVG + - SVG Animation +translation_of: Web/SVG/Element/animateTransform +--- +
{{SVGRef}}
+ +

L'élément <animateTransform> permet d'animer un élement en appliquant une transformation: translation, mise à l'échelle, rotation et/ou inclinaison.

+ +

Contexte d'utilisation

+ +

{{svginfo}}

+ +

Exemple

+ +
<?xml version="1.0"?>
+<svg width="120" height="120"  viewBox="0 0 120 120"
+     xmlns="http://www.w3.org/2000/svg" version="1.1"
+     xmlns:xlink="http://www.w3.org/1999/xlink" >
+
+    <polygon points="60,30 90,90 30,90">
+        <animateTransform attributeName="transform"
+                          attributeType="XML"
+                          type="rotate"
+                          from="0 60 70"
+                          to="360 60 70"
+                          dur="10s"
+                          repeatCount="indefinite"/>
+    </polygon>
+</svg>
+ +

{{ EmbedLiveSample('Exemple','120','120') }}

+ +

Attributs

+ +

Attributs globaux

+ + + +

Attributs spécifiques

+ + + +

Interface DOM

+ +

Cet élément implémente l'interface SVGAnimateTransformElement.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("SVG Animations 2", "#AnimateTransformElement", "<animateTransform>")}}{{Spec2("SVG Animations 2")}}Aucun changement
{{SpecName('SVG1.1', 'animate.html#AnimateTransformElement', '<animateTransform>')}}{{Spec2('SVG1.1')}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.elements.animateTransform")}}

diff --git a/files/fr/web/svg/element/circle/index.html b/files/fr/web/svg/element/circle/index.html new file mode 100644 index 0000000000..8cc64ab6f0 --- /dev/null +++ b/files/fr/web/svg/element/circle/index.html @@ -0,0 +1,68 @@ +--- +title: circle +slug: Web/SVG/Element/circle +tags: + - SVG + - SVG Element + - SVG Reference +translation_of: Web/SVG/Element/circle +--- +
{{SVGRef}}
+ +

L'élément circle est un élément de la catégorie des Formes simples, utilisé pour créer des cercles, en se basant sur un centre et un rayon.

+ +

Usage

+ +

{{svginfo}}

+ +

Exemple

+ + + +
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+
+  <circle cx="50" cy="50" r="50"/>
+
+</svg>
+ +

{{EmbedLiveSample('Exemple', 100, 100)}}

+ +

Attributs

+ +

Attributs Globaux

+ + + +

Attributs spécifiques

+ + + +

Interface DOM

+ +

Cet élément implémente l'interface {{ domxref("SVGCircleElement") }}.

+ +

Compatibilité avec les navigateurs

+ +

{{Compat("svg.elements.circle")}}

+ +

Corrélat

+ + diff --git a/files/fr/web/svg/element/clippath/index.html b/files/fr/web/svg/element/clippath/index.html new file mode 100644 index 0000000000..44ff32994f --- /dev/null +++ b/files/fr/web/svg/element/clippath/index.html @@ -0,0 +1,114 @@ +--- +title: +slug: Web/SVG/Element/clipPath +tags: + - Element + - SVG +translation_of: Web/SVG/Element/clipPath +--- +
{{SVGRef}}
+ +

L'élément SVG <clipPath> définit un détourage. Ce détourage peut par la suite être appliqué sur une forme en utilisant la propriété {{SVGAttr("clip-path")}}.

+ +

Le détourage limite la zone dans laquelle l'élément sur lequel il est appliqué sera dessiné. Autrement dit, les parties de l'élément en dehors de la forme créée par le détourage ne seront pas affichées.

+ +
+ + +
<svg viewBox="0 0 100 100">
+  <clipPath id="myClip">
+    <!-- La forme crée par le détourage est un simple cercle. -->
+    <circle cx="40" cy="35" r="35" />
+  </clipPath>
+
+  <!-- Le coeur sans détourage, pour référence -->
+  <path id="heart" d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z" />
+
+  <!--
+    Le coeur avec détourage.
+    Seule la partie à l'intérieur du cercle est visible.
+  -->
+  <use clip-path="url(#myClip)" xlink:href="#heart" fill="red" />
+</svg>
+ +
/* Animation CSS pour les navigateurs *
+ * qui implémentent la propriété de géométrie r. */
+
+@keyframes openYourHeart {from {r: 0} to {r: 60px}}
+
+#myClip circle {
+  animation: openYourHeart 15s infinite;
+}
+ +

{{EmbedLiveSample('Example', 100, 100)}}

+
+ +

Sur le plan conceptuel, un détourage est un peu comme une zone d'affichage personnalisée pour l'élément sur lequel il est appliqué. Cela va limiter la zone dans laquelle l'élément est affiché, sans affecter sa géométrie (position, taille, etc).

+ +

La zone de sélection d'un élément détouré (c'est à dire un élément qui référence un <clipPath> via la propriété {{SVGAttr("clip-path")}}, ou un de ses enfant) reste la même, comme s'il n'était pas tronqué.

+ +

Par défaut, les événements de pointeur ne sont pas déclenchés sur les régions détourées (non visibles) d'une forme. Par exemple, un cercle avec un rayon de 10 qui est détouré à un cercle de rayon 5, ne recevra pas d'événement "click" en dehors de ce rayon de 5. Ce comportement peut être modifié avec la propriété {{cssxref("pointer-events")}}.

+ +

Attributs

+ +
+
{{SVGAttr("clipPathUnits")}}
+
Cet attribut définit le système de coordonnées pour le contenu de l'élément <clipPath>.
+ Valeur: userSpaceOnUse|objectBoundingBox ; Valeur par défaut: userSpaceOnUse; Animation: oui
+
+ +

Attributs globaux

+ +
+
Attributs de base
+
Notamment: {{SVGAttr('id')}}
+
Attributs de style
+
{{SVGAttr('class')}}, {{SVGAttr('style')}}
+
Attributs de traitement conditionnel
+
Notamment: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
+
Attributs de présentation
+
Notamment: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
+
+ +

Notes d'usage

+ +

{{svginfo}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("CSS Masks", "#ClipPathElement", "<clipPath>")}}{{Spec2("CSS Masks")}} 
{{SpecName("SVG1.1", "masking.html#EstablishingANewClippingPath", "<clipPath>")}}{{Spec2("SVG1.1")}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.elements.clipPath")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/svg/element/defs/index.html b/files/fr/web/svg/element/defs/index.html new file mode 100644 index 0000000000..56fbe41a82 --- /dev/null +++ b/files/fr/web/svg/element/defs/index.html @@ -0,0 +1,137 @@ +--- +title: +slug: Web/SVG/Element/defs +translation_of: Web/SVG/Element/defs +--- +
{{SVGRef}}
+ +

SVG permet de définir des objets graphiques (génériques) pour une utilisation ultérieure. Autant qu'il est possible, cet usage est recommandé grâce aux propriétés offertes par l'élément defs.
+ Ainsi définir ces éléments au sein de l'élément defs promeut une meilleure compréhension du contenu SVG par l'homme et donc son accessibilité.
+
+ Les éléments définis grâce à defs ne sont jamais directement générés (au sens du rendu graphique : ils ne sont pas affichés). Vous devez utiliser l'élément {{SVGElement("use")}} pour leur-s utilisation-s lorsque vous le souhaitez au sein du viewport.

+ +

Contexte d'usage

+ +

{{svginfo}}

+ +

Exemple

+ +
<svg width="80px" height="30px" viewBox="0 0 80 30"
+     xmlns="http://www.w3.org/2000/svg">
+
+  <defs>
+    <linearGradient id="Gradient01">
+      <stop offset="20%" stop-color="#39F" />
+      <stop offset="90%" stop-color="#F3F" />
+    </linearGradient>
+  </defs>
+
+  <rect x="10" y="10" width="60" height="10"
+        fill="url(#Gradient01)"  />
+</svg>
+
+ +

Attributs

+ +

Attributs globaux

+ + + +

Attributs spécifiques

+ +

Il ne dispoe pas d'attributs spécifiques.

+ +

Interface avec DOM

+ +

Cet élément est implémenté par l'interface SVGDefsElement.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatusCommentaire
{{SpecName('SVG2', 'struct.html#Head', '<defs>')}}{{Spec2('SVG2')}} 
{{SpecName('SVG1.1', 'struct.html#Head', '<defs>')}}{{Spec2('SVG1.1')}}Initial definition
+ +

Compatibilité avec les navigateurs

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop('1.8')}}{{CompatIE('9.0')}}{{CompatOpera('8.0')}}{{CompatSafari('3.0.4')}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatAndroid('3.0')}}{{CompatGeckoMobile('1.8')}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatSafari('3.0.4')}}
+
+ +

The chart is based on these sources.

+ +

En lien avec

+ +
    +
  • {{SVGElement("use")}}
    • +
diff --git a/files/fr/web/svg/element/desc/index.html b/files/fr/web/svg/element/desc/index.html new file mode 100644 index 0000000000..a67db82bb0 --- /dev/null +++ b/files/fr/web/svg/element/desc/index.html @@ -0,0 +1,48 @@ +--- +title: desc +slug: Web/SVG/Element/desc +tags: + - Element + - SVG + - SVG Description +translation_of: Web/SVG/Element/desc +--- +
{{SVGRef}}
+ +

Tout élément graphique ou conteneur dans un dessin SVG peut définir une description en utilisant l'élément <desc>, cette description ne peut contenir que du texte.

+ +

Quand l'élément contenant une description apparaît à l'utilisateur sous forme d'image, l'élément <desc> n'est pas affiché. Néanmoins, quelques moteurs de rendu peuvent, par exemple, l'afficher sous forme d'infobulle. Des représentations alternatives sont possibles, visuelles ou auditives, en remplacement des éléments graphiques. De manière générale, cet élément améliore l'accessibilité des documents SVG.

+ +

Contexte d'utilisation

+ +

{{svginfo}}

+ +

Attributs

+ +

Attributs globaux

+ + + +

Attributs spécifiques

+ +

(Aucun)

+ +

Interface DOM

+ +

Cet élément implémente l'interface SVGDescElement.

+ +

Compatibilitée des navigateurs

+ + + +

{{Compat("svg.elements.desc")}}

+ +

Voir aussi

+ +
    +
  • {{ SVGElement("title") }}
    • +
diff --git a/files/fr/web/svg/element/ellipse/index.html b/files/fr/web/svg/element/ellipse/index.html new file mode 100644 index 0000000000..571dbe6acd --- /dev/null +++ b/files/fr/web/svg/element/ellipse/index.html @@ -0,0 +1,155 @@ +--- +title: ellipse +slug: Web/SVG/Element/ellipse +tags: + - SVG + - SVG Element + - SVG Reference +translation_of: Web/SVG/Element/ellipse +--- +
{{SVGRef}}
+ +

L'élément ellipse est une forme basique SVG,utilisé pour créer des ellipses basées sur un centre, et ses deux rayons x et y.

+ +
+

Note: Il est impossible de spécifier l'orientation exacte d'une ellipse (par exemple, si vous souhaitez dessiner une ellipse à un angle de 45°), mais l'ellipse peut avoir une rotation avec l'attribut {{ SVGAttr("transform") }}.

+
+ +
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
+  <ellipse cx="100" cy="50" rx="100" ry="50" />
+</svg>
+ +

Attributs

+ +

Attributs spécifiques

+ + + +
+
{{ SVGAttr("cx") }}
+
La position x de l'ellipse.
+ Type de valeur : <longueur>|<pourcentage>; Valeur par défaut : 0; Animable : oui.
+
{{ SVGAttr("cy") }}
+
La position y de l'ellipse.
+ Type de valeur : <longueur>|<pourcentage>; Valeur par défaut : 0; Animable : oui.
+
{{ SVGAttr("rx") }}
+
Le rayon de l'ellipse sur l'axe x.
+ Type de valeur : auto|<longueur>|<pourcentage>; Valeur par défaut : auto; Animable : oui.
+
{{ SVGAttr("ry") }}
+
Le rayon de l'ellipse sur l'axe y.
+ Type de valeur : auto|<longueur>|<pourcentage>; Valeur par défaut : auto; Animable : oui.
+
{{ SVGAttr("pathLength") }}
+
Cet attribut permet de spécifier la longueur totale du tracé, en unités de l'utilisateur.
+ Type de valeur : <number>; Valeur par défaut : auto; Animable : oui.
+
+ +
+

Note: À partir de SVG2, cx, cy, rx, et ry sont des Propriétés Géomatriques, ce qui signifie que ces attributs peuvent aussi être utilisés comme propriétés CSS pour cet élément.

+
+ +

Attributs Globaux

+ +
+
Attributs centraux
+
Plus notamment : {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
+
Attributs de style
+
{{SVGAttr('class')}}, {{SVGAttr('style')}}
+
Attributs de traitement conditionnel
+
Plus notamment : {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
+
Attributs d'événements
+
Attributs d'événément globaux, Attributs d'événément graphiques
+
Attributs de présentation
+
Plus notamment : {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
+
Attributs ARIA
+
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
+
+ +

Usage

+ +

{{svginfo}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('SVG2', 'shapes.html#EllipseElement', '<ellipse>')}}{{Spec2('SVG2')}}Ajout de la valeur auto pour rx et ry
{{SpecName('SVG1.1', 'shapes.html#EllipseElement', '<ellipse>')}}{{Spec2('SVG1.1')}}Définition initiale
+ +

Interface DOM

+ +

Cet élément implémente l'interface SVGEllipseElement.

+ +

Compatibilité avec les navigateurs

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FonctionnalitésChromeFirefox (Gecko)Internet ExplorerOperaSafari
Support basique1.0{{ CompatGeckoDesktop('1.8') }}{{ CompatIE('9.0') }}{{ CompatOpera('8.0') }}{{ CompatSafari('3.0.4') }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Support basique{{ CompatAndroid('3.0') }}{{ CompatGeckoMobile('1.8') }}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatSafari('3.0.4') }}
+
+ +

Cette table est basée sur ces ressources.

+ +

Corrélat

+ +
    +
  • {{ SVGElement("circle") }}
    • +
diff --git a/files/fr/web/svg/element/feblend/index.html b/files/fr/web/svg/element/feblend/index.html new file mode 100644 index 0000000000..f4c4a3fdf0 --- /dev/null +++ b/files/fr/web/svg/element/feblend/index.html @@ -0,0 +1,117 @@ +--- +title: +slug: Web/SVG/Element/feBlend +tags: + - Element + - SVG + - SVG Filter +translation_of: Web/SVG/Element/feBlend +--- +
{{SVGRef}}
+ +

La primitive de filtre SVG <feBlend> permet de combiner deux objets en utilisant un mode de fusion définit, un peu de la même manière que les logiciels de retouche d'image permettent de fusionner deux calques. Le mode à utiliser est définit par l'attribut {{SVGAttr("mode")}}.

+ +

Contexte d'utilisation

+ +

{{svginfo}}

+ +

Attributs

+ +

Attributs globaux

+ + + +

Attributs spécifiques

+ +
    +
  • {{SVGAttr("in")}}
    • +
  • {{SVGAttr("in2")}}
    • +
  • {{SVGAttr("mode")}}
    • +
+ +

Interface DOM

+ +

Cet élément implémente l'interface {{domxref("SVGFEBlendElement")}}.

+ +

Exemple

+ +

SVG

+ +
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <filter id="spotlight">
+      <feFlood result="floodFill" x="0" y="0" width="100%" height="100%"
+          flood-color="green" flood-opacity="1"/>
+      <feBlend in="SourceGraphic" in2="floodFill" mode="multiply"/>
+    </filter>
+  </defs>
+
+  <image xlink:href="/files/6457/mdn_logo_only_color.png"
+      x="10%" y="10%" width="80%" height="80%"
+      style="filter:url(#spotlight);"/>
+</svg>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple", 200, 200)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("Filters 1.0", "#feBlendElement", "<feBlend>")}}{{Spec2("Filters 1.0")}}Modes de fusion externalisés vers {{SpecName("Compositing", "#ltblendmodegt")}}
{{SpecName("SVG1.1", "filters.html#feBlendElement", "<feBlend>")}}{{Spec2("SVG1.1")}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.elements.feBlend")}}

+ +

Voir aussi

+ +
    +
  • {{SVGElement("filter")}}
    • +
  • {{SVGElement("animate")}}
    • +
  • {{SVGElement("set")}}
    • +
  • {{SVGElement("feColorMatrix")}}
    • +
  • {{SVGElement("feComponentTransfer")}}
    • +
  • {{SVGElement("feComposite")}}
    • +
  • {{SVGElement("feConvolveMatrix")}}
    • +
  • {{SVGElement("feDiffuseLighting")}}
    • +
  • {{SVGElement("feDisplacementMap")}}
    • +
  • {{SVGElement("feFlood")}}
    • +
  • {{SVGElement("feGaussianBlur")}}
    • +
  • {{SVGElement("feImage")}}
    • +
  • {{SVGElement("feMerge")}}
    • +
  • {{SVGElement("feMorphology")}}
    • +
  • {{SVGElement("feOffset")}}
    • +
  • {{SVGElement("feSpecularLighting")}}
    • +
  • {{SVGElement("feTile")}}
    • +
  • {{SVGElement("feTurbulence")}}
    • +
  • Tutoriel SVG: Filtres
    • +
diff --git a/files/fr/web/svg/element/fecolormatrix/index.html b/files/fr/web/svg/element/fecolormatrix/index.html new file mode 100644 index 0000000000..4f35a9525b --- /dev/null +++ b/files/fr/web/svg/element/fecolormatrix/index.html @@ -0,0 +1,163 @@ +--- +title: +slug: Web/SVG/Element/feColorMatrix +tags: + - Element + - SVG + - SVG Filter +translation_of: Web/SVG/Element/feColorMatrix +--- +
{{SVGRef}}
+ +

La primitive de filtre SVG <feColorMatrix> change les couleurs d'un élément en fonction d'une matrice de transformation. Chaque pixel (représenté par un vecteur [R,G,B,A]) est multiplié par matrice pour créer une nouvelle couleur:

+ +
| R' |     | a00 a01 a02 a03 a04 |   | R |
+| G' |     | a10 a11 a12 a13 a14 |   | G |
+| B' |  =  | a20 a21 a22 a23 a24 | * | B |
+| A' |     | a30 a31 a32 a33 a34 |   | A |
+| 1  |     |  0   0   0   0   1  |   | 1 |
+ +

Contexte d'utilisation

+ +

{{svginfo}}

+ +

Attributs

+ +

Attributs globaux

+ + + +

Attributs spécifiques

+ +
    +
  • {{SVGAttr("in")}}
    • +
  • {{SVGAttr("type")}}
    • +
  • {{SVGAttr("values")}}
    • +
+ +

Interface DOM

+ +

Cet élément implémente l'interface {{domxref("SVGFEColorMatrixElement")}}.

+ +

Exemple

+ +

SVG

+ +
<svg width="100%" height="100%" viewBox="0 0 150 360"
+    preserveAspectRatio="xMidYMid meet"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+
+  <!-- ref -->
+  <defs>
+    <g id="circles">
+      <circle cx="30" cy="30" r="20" fill="blue" fill-opacity="0.5" />
+      <circle cx="20" cy="50" r="20" fill="green" fill-opacity="0.5" />
+      <circle cx="40" cy="50" r="20" fill="red" fill-opacity="0.5" />
+    </g>
+  </defs>
+  <use href="#circles" />
+  <text x="70" y="50">Reference</text>
+
+  <!-- matrix -->
+  <filter id="colorMeMatrix">
+    <feColorMatrix in="SourceGraphic"
+        type="matrix"
+        values="0 0 0 0 0
+                1 1 1 1 0
+                0 0 0 0 0
+                0 0 0 1 0" />
+  </filter>
+  <use href="#circles" transform="translate(0 70)" filter="url(#colorMeMatrix)" />
+  <text x="70" y="120">matrix</text>
+
+  <!-- saturate -->
+  <filter id="colorMeSaturate">
+    <feColorMatrix in="SourceGraphic"
+        type="saturate"
+        values="0.2" />
+  </filter>
+  <use href="#circles" transform="translate(0 140)" filter="url(#colorMeSaturate)" />
+  <text x="70" y="190">saturate</text>
+
+  <!-- hueRotate -->
+  <filter id="colorMeHueRotate">
+    <feColorMatrix in="SourceGraphic"
+        type="hueRotate"
+        values="180" />
+  </filter>
+  <use href="#circles" transform="translate(0 210)" filter="url(#colorMeHueRotate)" />
+  <text x="70" y="260">hueRotate</text>
+
+  <!-- luminanceToAlpha -->
+  <filter id="colorMeLTA">
+    <feColorMatrix in="SourceGraphic"
+        type="luminanceToAlpha" />
+  </filter>
+  <use href="#circles" transform="translate(0 280)" filter="url(#colorMeLTA)" />
+  <text x="70" y="320">luminanceToAlpha</text>
+</svg>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple", "100%", 700, "/files/4371/test.png")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Filters 1.0', '#feColorMatrixElement', '<feColorMatrix>')}}{{Spec2('Filters 1.0')}}Aucun changement
{{SpecName('SVG1.1', 'filters.html#feColorMatrixElement', '<feColorMatrix>')}}{{Spec2('SVG1.1')}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.elements.feColorMatrix")}}

+ +

Voir aussi

+ +
    +
  • {{SVGElement("filter")}}
    • +
  • {{SVGElement("animate")}}
    • +
  • {{SVGElement("set")}}
    • +
  • {{SVGElement("feBlend")}}
    • +
  • {{SVGElement("feComponentTransfer")}}
    • +
  • {{SVGElement("feComposite")}}
    • +
  • {{SVGElement("feConvolveMatrix")}}
    • +
  • {{SVGElement("feDiffuseLighting")}}
    • +
  • {{SVGElement("feDisplacementMap")}}
    • +
  • {{SVGElement("feFlood")}}
    • +
  • {{SVGElement("feGaussianBlur")}}
    • +
  • {{SVGElement("feImage")}}
    • +
  • {{SVGElement("feMerge")}}
    • +
  • {{SVGElement("feMorphology")}}
    • +
  • {{SVGElement("feOffset")}}
    • +
  • {{SVGElement("feSpecularLighting")}}
    • +
  • {{SVGElement("feTile")}}
    • +
  • {{SVGElement("feTurbulence")}}
    • +
  • Tutoriel SVG: Filtres
    • +
diff --git a/files/fr/web/svg/element/fecomponenttransfer/index.html b/files/fr/web/svg/element/fecomponenttransfer/index.html new file mode 100644 index 0000000000..0caaba1681 --- /dev/null +++ b/files/fr/web/svg/element/fecomponenttransfer/index.html @@ -0,0 +1,165 @@ +--- +title: +slug: Web/SVG/Element/feComponentTransfer +tags: + - Element + - SVG + - SVG Filter +translation_of: Web/SVG/Element/feComponentTransfer +--- +
{{SVGRef}}
+ +

La primitive de filtre SVG <feComponentTransfer> permet d'effectuer un remappage des composantes de couleur (rouge, bleu, vert et alpha) de chaque pixel. Cela permet notamment de régler la luminosité, le constraste, la balance des couleurs ou encore le seuillage.

+ +

Les calculs sont effectués sur les valeurs de couleur non prémultipliées. Chaque canal de couleur est modifié en utilisant le résultat des éléments {{SVGElement("feFuncR")}}, {{SVGElement("feFuncB")}}, {{SVGElement("feFuncG")}}, et {{SVGElement("feFuncA")}} placés à l'intérieur de la balise.

+ +

Contexte d'utilisation

+ +

{{svginfo}}

+ +

Attributs

+ +

Attributs globaux

+ + + +

Attributs spécifiques

+ +
    +
  • {{SVGAttr("in")}}
    • +
+ +

Interface DOM

+ +

Cet élément implémente l'interface {{domxref("SVGFEComponentTransferElement")}}.

+ +

Exemple

+ +

SVG

+ +
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 300">
+  <defs>
+    <linearGradient id="rainbow" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="100%" y2="0">
+      <stop offset="0" stop-color="#ff0000"></stop>
+      <stop offset="0.2" stop-color="#ffff00"></stop>
+      <stop offset="0.4" stop-color="#00ff00"></stop>
+      <stop offset="0.6" stop-color="#00ffff"></stop>
+      <stop offset="0.8" stop-color="#0000ff"></stop>
+      <stop offset="1" stop-color="#800080"></stop>
+    </linearGradient>
+    <filter id="identity" x="0" y="0" width="100%" height="100%">
+      <feComponentTransfer>
+        <feFuncR type="identity"></feFuncR>
+        <feFuncG type="identity"></feFuncG>
+        <feFuncB type="identity"></feFuncB>
+        <feFuncA type="identity"></feFuncA>
+      </feComponentTransfer>
+    </filter>
+    <filter id="table" x="0" y="0" width="100%" height="100%">
+      <feComponentTransfer>
+        <feFuncR type="table" tableValues="0 0 1 1"></feFuncR>
+        <feFuncG type="table" tableValues="1 1 0 0"></feFuncG>
+        <feFuncB type="table" tableValues="0 1 1 0"></feFuncB>
+      </feComponentTransfer>
+    </filter>
+    <filter id="linear" x="0" y="0" width="100%" height="100%">
+      <feComponentTransfer>
+        <feFuncR type="linear" slope="0.5" intercept="0"></feFuncR>
+        <feFuncG type="linear" slope="0.5" intercept="0.25"></feFuncG>
+        <feFuncB type="linear" slope="0.5" intercept="0.5"></feFuncB>
+      </feComponentTransfer>
+    </filter>
+    <filter id="gamma" x="0" y="0" width="100%" height="100%">
+      <feComponentTransfer>
+        <feFuncR type="gamma" amplitude="4" exponent="7" offset="0"></feFuncR>
+        <feFuncG type="gamma" amplitude="4" exponent="4" offset="0"></feFuncG>
+        <feFuncB type="gamma" amplitude="4" exponent="1" offset="0"></feFuncB>
+      </feComponentTransfer>
+    </filter>
+  </defs>
+
+  <g font-weight="bold">
+    <text x="0" y="5%">Default</text>
+    <rect x="0" y="8%" width="100%" height="20"></rect>
+    <text x="0" y="26%">Identity</text>
+    <rect x="0" y="29%" width="100%" height="20" style="filter:url(#identity)"></rect>
+    <text x="0" y="47%">Table lookup</text>
+    <rect x="0" y="50%" width="100%" height="20" style="filter:url(#table)"></rect>
+    <text x="0" y="68%">Linear function</text>
+    <rect x="0" y="71%" width="100%" height="20" style="filter:url(#linear)"></rect>
+    <text x="0" y="89%">Gamma function</text>
+    <rect x="0" y="92%" width="100%" height="20" style="filter:url(#gamma)"></rect>
+  </g>
+</svg>
+ +

CSS

+ +
rect {
+  fill: url(#rainbow);
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple", "100%", 340)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Filters 1.0', '#feComponentTransferElement', '<feComponentTransfer>')}}{{Spec2('Filters 1.0')}}Spécifie que les fonctions de transfert non définies sont traitées comme si elles avaient été définies avec pour  {{SVGAttr("type")}} identity.
{{SpecName('SVG1.1', 'filters.html#feComponentTransferElement', '<feComponentTransfer>')}}{{Spec2('SVG1.1')}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.elements.feComponentTransfer")}}

+ +

Voir aussi

+ +
    +
  • {{SVGElement("filter")}}
    • +
  • {{SVGElement("feBlend")}}
    • +
  • {{SVGElement("feColorMatrix")}}
    • +
  • {{SVGElement("feComposite")}}
    • +
  • {{SVGElement("feConvolveMatrix")}}
    • +
  • {{SVGElement("feDiffuseLighting")}}
    • +
  • {{SVGElement("feDisplacementMap")}}
    • +
  • {{SVGElement("feFlood")}}
    • +
  • {{SVGElement("feFuncA")}}
    • +
  • {{SVGElement("feFuncB")}}
    • +
  • {{SVGElement("feFuncG")}}
    • +
  • {{SVGElement("feFuncR")}}
    • +
  • {{SVGElement("feGaussianBlur")}}
    • +
  • {{SVGElement("feImage")}}
    • +
  • {{SVGElement("feMerge")}}
    • +
  • {{SVGElement("feMorphology")}}
    • +
  • {{SVGElement("feOffset")}}
    • +
  • {{SVGElement("feSpecularLighting")}}
    • +
  • {{SVGElement("feTile")}}
    • +
  • {{SVGElement("feTurbulence")}}
    • +
  • Tutoriel SVG: Filtres
    • +
diff --git a/files/fr/web/svg/element/fecomposite/index.html b/files/fr/web/svg/element/fecomposite/index.html new file mode 100644 index 0000000000..81510fafa9 --- /dev/null +++ b/files/fr/web/svg/element/fecomposite/index.html @@ -0,0 +1,288 @@ +--- +title: +slug: Web/SVG/Element/feComposite +tags: + - Element + - SVG + - SVG Filter +translation_of: Web/SVG/Element/feComposite +--- +
{{SVGRef}}
+ +

La primitive de filtre SVG <feComposite> effectue la combinaison de deux images en entrée, pixel par pixel, en utilisant une des opérations de composition de Porter-Duff: over, in, atop, out, xor, et lighter. Il est également possible d'appliquer une opération de type arithmetic (avec un résultat borné entre [0..1]).

+ +

L'opération arithmetic est utile pour combiner le résultat de {{SVGElement("feDiffuseLighting")}} et {{SVGElement("feSpecularLighting")}} avec des textures. Si l'opération arithmetic est choisie, chaque pixel est calculé à l'aide de la formule suivante:

+ +
result = k1*i1*i2 + k2*i1 + k3*i2 + k4
+
+ +

où

+ +
    +
  • i1 et i2 indiquent les valeurs des pixels correspondant aux images en entrée, {{SVGAttr("in")}} et {{SVGAttr("in2")}} respectivement
    • +
  • k1, k2, k3 et k4 indiquent les valeurs des attributs du même nom
    • +
+ +

Contexte d'utilisation

+ +

{{svginfo}}

+ +

Attributs

+ +

Attributs globaux

+ + + +

Attributs spécifiques

+ +
    +
  • {{SVGAttr("in")}}
    • +
  • {{SVGAttr("in2")}}
    • +
  • {{SVGAttr("operator")}}
    • +
  • {{SVGAttr("k1")}}
    • +
  • {{SVGAttr("k2")}}
    • +
  • {{SVGAttr("k3")}}
    • +
  • {{SVGAttr("k4")}}
    • +
+ +

Interface DOM

+ +

Cet élément implémente l'interface {{domxref("SVGFECompositeElement")}}.

+ +

Exemple

+ +

SVG

+ +
<svg width="330" height="195" viewBox="0 0 1100 650" version="1.1"
+     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <title>Example feComposite - Examples of feComposite operations</title>
+  <desc>Four rows of six pairs of overlapping triangles depicting
+        the six different feComposite operators under different
+        opacity values and different clearing of the background.</desc>
+	<defs>
+    <desc>Define two sets of six filters for each of the six compositing operators.
+          The first set wipes out the background image by flooding with opaque white.
+          The second set does not wipe out the background, with the result
+          that the background sometimes shines through and is other cases
+          is blended into itself (i.e., "double-counting").</desc>
+    <filter id="overFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
+      <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
+      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="over" result="comp"/>
+      <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
+    </filter>
+    <filter id="inFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
+      <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
+      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="in" result="comp"/>
+      <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
+    </filter>
+    <filter id="outFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
+      <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
+      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="out" result="comp"/>
+      <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
+    </filter>
+    <filter id="atopFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
+      <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
+      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="atop" result="comp"/>
+      <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
+    </filter>
+    <filter id="xorFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
+      <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
+      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="xor" result="comp"/>
+      <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
+    </filter>
+    <filter id="arithmeticFlood" filterUnits="objectBoundingBox"
+            x="-5%" y="-5%" width="110%" height="110%">
+      <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
+      <feComposite in="SourceGraphic" in2="BackgroundImage" result="comp"
+                   operator="arithmetic" k1=".5" k2=".5" k3=".5" k4=".5"/>
+      <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
+    </filter>
+    <filter id="overNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
+      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="over" result="comp"/>
+    </filter>
+    <filter id="inNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
+      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="in" result="comp"/>
+    </filter>
+    <filter id="outNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
+      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="out" result="comp"/>
+    </filter>
+    <filter id="atopNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
+      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="atop" result="comp"/>
+    </filter>
+    <filter id="xorNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
+      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="xor" result="comp"/>
+    </filter>
+    <filter id="arithmeticNoFlood" filterUnits="objectBoundingBox"
+            x="-5%" y="-5%" width="110%" height="110%">
+      <feComposite in="SourceGraphic" in2="BackgroundImage" result="comp"
+                   operator="arithmetic" k1=".5" k2=".5" k3=".5" k4=".5"/>
+    </filter>
+    <path id="Blue100" d="M 0 0 L 100 0 L 100 100 z" fill="#00ffff" />
+    <path id="Red100" d="M 0 0 L 0 100 L 100 0 z" fill="#ff00ff" />
+    <path id="Blue50" d="M 0 125 L 100 125 L 100 225 z" fill="#00ffff" fill-opacity=".5" />
+    <path id="Red50" d="M 0 125 L 0 225 L 100 125 z" fill="#ff00ff" fill-opacity=".5" />
+    <g id="TwoBlueTriangles">
+      <use xlink:href="#Blue100"/>
+      <use xlink:href="#Blue50"/>
+    </g>
+    <g id="BlueTriangles">
+      <use transform="translate(275,25)" xlink:href="#TwoBlueTriangles"/>
+      <use transform="translate(400,25)" xlink:href="#TwoBlueTriangles"/>
+      <use transform="translate(525,25)" xlink:href="#TwoBlueTriangles"/>
+      <use transform="translate(650,25)" xlink:href="#TwoBlueTriangles"/>
+      <use transform="translate(775,25)" xlink:href="#TwoBlueTriangles"/>
+      <use transform="translate(900,25)" xlink:href="#TwoBlueTriangles"/>
+    </g>
+  </defs>
+
+  <rect fill="none" stroke="blue" x="1" y="1" width="1098" height="648"/>
+  <g font-family="Verdana" font-size="40" shape-rendering="crispEdges">
+    <desc>Render the examples using the filters that draw on top of
+          an opaque white surface, thus obliterating the background.</desc>
+    <g enable-background="new">
+      <text x="15" y="75">opacity 1.0</text>
+      <text x="15" y="115" font-size="27">(with feFlood)</text>
+      <text x="15" y="200">opacity 0.5</text>
+      <text x="15" y="240" font-size="27">(with feFlood)</text>
+      <use xlink:href="#BlueTriangles"/>
+      <g transform="translate(275,25)">
+        <use xlink:href="#Red100" filter="url(#overFlood)" />
+        <use xlink:href="#Red50" filter="url(#overFlood)" />
+        <text x="5" y="275">over</text>
+      </g>
+      <g transform="translate(400,25)">
+        <use xlink:href="#Red100" filter="url(#inFlood)" />
+        <use xlink:href="#Red50" filter="url(#inFlood)" />
+        <text x="35" y="275">in</text>
+      </g>
+      <g transform="translate(525,25)">
+        <use xlink:href="#Red100" filter="url(#outFlood)" />
+        <use xlink:href="#Red50" filter="url(#outFlood)" />
+        <text x="15" y="275">out</text>
+      </g>
+      <g transform="translate(650,25)">
+        <use xlink:href="#Red100" filter="url(#atopFlood)" />
+        <use xlink:href="#Red50" filter="url(#atopFlood)" />
+        <text x="10" y="275">atop</text>
+      </g>
+      <g transform="translate(775,25)">
+        <use xlink:href="#Red100" filter="url(#xorFlood)" />
+        <use xlink:href="#Red50" filter="url(#xorFlood)" />
+        <text x="15" y="275">xor</text>
+      </g>
+      <g transform="translate(900,25)">
+        <use xlink:href="#Red100" filter="url(#arithmeticFlood)" />
+        <use xlink:href="#Red50" filter="url(#arithmeticFlood)" />
+        <text x="-25" y="275">arithmetic</text>
+      </g>
+    </g>
+    <g transform="translate(0,325)" enable-background="new">
+    <desc>Render the examples using the filters that do not obliterate
+          the background, thus sometimes causing the background to continue
+          to appear in some cases, and in other cases the background
+          image blends into itself ("double-counting").</desc>
+      <text x="15" y="75">opacity 1.0</text>
+      <text x="15" y="115" font-size="27">(without feFlood)</text>
+      <text x="15" y="200">opacity 0.5</text>
+      <text x="15" y="240" font-size="27">(without feFlood)</text>
+      <use xlink:href="#BlueTriangles"/>
+      <g transform="translate(275,25)">
+        <use xlink:href="#Red100" filter="url(#overNoFlood)" />
+        <use xlink:href="#Red50" filter="url(#overNoFlood)" />
+        <text x="5" y="275">over</text>
+      </g>
+      <g transform="translate(400,25)">
+        <use xlink:href="#Red100" filter="url(#inNoFlood)" />
+        <use xlink:href="#Red50" filter="url(#inNoFlood)" />
+        <text x="35" y="275">in</text>
+      </g>
+      <g transform="translate(525,25)">
+        <use xlink:href="#Red100" filter="url(#outNoFlood)" />
+        <use xlink:href="#Red50" filter="url(#outNoFlood)" />
+        <text x="15" y="275">out</text>
+      </g>
+      <g transform="translate(650,25)">
+        <use xlink:href="#Red100" filter="url(#atopNoFlood)" />
+        <use xlink:href="#Red50" filter="url(#atopNoFlood)" />
+        <text x="10" y="275">atop</text>
+      </g>
+      <g transform="translate(775,25)">
+        <use xlink:href="#Red100" filter="url(#xorNoFlood)" />
+        <use xlink:href="#Red50" filter="url(#xorNoFlood)" />
+        <text x="15" y="275">xor</text>
+      </g>
+      <g transform="translate(900,25)">
+        <use xlink:href="#Red100" filter="url(#arithmeticNoFlood)" />
+        <use xlink:href="#Red50" filter="url(#arithmeticNoFlood)" />
+        <text x="-25" y="275">arithmetic</text>
+      </g>
+    </g>
+  </g>
+</svg>
+
+ +

Résultat

+ +

Cette image affine le résultat désiré.

+ +

Example feComposite — Examples of feComposite operations

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Filters 1.0', '#feCompositeElement', '<feComposite>')}}{{Spec2('Filters 1.0')}}Ajoute la valeur lighter pour l'attribut operator.
{{SpecName('SVG1.1', 'filters.html#feCompositeElement', '<feComposite>')}}{{Spec2('SVG1.1')}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.elements.feComposite")}}

+ +

Voir aussi

+ +
    +
  • {{SVGElement("filter")}}
    • +
  • {{SVGElement("animate")}}
    • +
  • {{SVGElement("set")}}
    • +
  • {{SVGElement("feBlend")}}
    • +
  • {{SVGElement("feColorMatrix")}}
    • +
  • {{SVGElement("feComponentTransfer")}}
    • +
  • {{SVGElement("feConvolveMatrix")}}
    • +
  • {{SVGElement("feDiffuseLighting")}}
    • +
  • {{SVGElement("feDisplacementMap")}}
    • +
  • {{SVGElement("feFlood")}}
    • +
  • {{SVGElement("feGaussianBlur")}}
    • +
  • {{SVGElement("feImage")}}
    • +
  • {{SVGElement("feMerge")}}
    • +
  • {{SVGElement("feMorphology")}}
    • +
  • {{SVGElement("feOffset")}}
    • +
  • {{SVGElement("feSpecularLighting")}}
    • +
  • {{SVGElement("feTile")}}
    • +
  • {{SVGElement("feTurbulence")}}
    • +
  • Tutoriel SVG: Filtres
    • +
diff --git a/files/fr/web/svg/element/feconvolvematrix/index.html b/files/fr/web/svg/element/feconvolvematrix/index.html new file mode 100644 index 0000000000..1fc9908ce1 --- /dev/null +++ b/files/fr/web/svg/element/feconvolvematrix/index.html @@ -0,0 +1,169 @@ +--- +title: +slug: Web/SVG/Element/feConvolveMatrix +tags: + - Element + - SVG + - SVG Filter +translation_of: Web/SVG/Element/feConvolveMatrix +--- +
{{SVGRef}}
+ +

La primitive de filtre SVG <feConvolveMatrix> applique une matrice de convolution d'effet de filtre. Une convolution combine les pixels de l'image en entrée avec ceux voisins pour donner une image résultante. On peut obtenir une grande variété d'opérations d'imagerie à l'aide de convolutions, dont le flou, la détection de bord, la netteté, l'estampage et le chanfreinage.

+ +

Une convolution de matrice se fonde sur une matrice n par m (le noyau de convolution), qui décrit la façon dont une valeur de pixel donné de l'image en entrée est combinée avec celles des pixels de son voisinage pour aboutir à une valeur de pixel résultante. Chaque pixel du résultat est déterminé par l'application de la matrice noyau sur le pixel source correspondant et ses pixels voisins. La formule de convolution de base, appliquée à chaque valeur de couleur d'un pixel donné, est :

+ +

COLORX,Y = ( 
+               SUM I=0 to [orderY-1] { 
+                 SUM J=0 to [orderX-1] { 
+                   SOURCE X-targetX+J, Y-targetY+I *  kernelMatrixorderX-J-1,  orderY-I-1 
+                 } 
+               } 
+             ) /  divisor +  bias * ALPHAX,Y 

+ +

dans laquelle

+ +
    +
  • "orderX" et "orderY" représentent les valeurs X et Y pour l'attribut {{SVGAttr("order")}},
    • +
  • "targetX" représente la valeur de l'attribut {{SVGAttr("targetX")}},
    • +
  • "targetY" la valeur de l'attribut {{SVGAttr("targetY")}},
    • +
  • "kernelMatrix" celle de l'attribut {{SVGAttr("kernelMatrix")}},
    • +
  • "divisor" celle de l'attribut {{SVGAttr("divisor")}}
    • +
  • et "bias" la valeur de l'attribut {{SVGAttr("bias")}}.
    • +
+ +

Remarquez dans la formule ci-dessus que les valeurs de la matrice noyau sont appliquées de telle manière que cette matrice noyau soit tournée de 180 degrés par rapport aux images de source et de destination, pour correspondre avec la théorie de la convolution telle qu'elle est décrite dans de nombreux ouvrages sur l'infographie.

+ +

Pour illustrer, supposons que l'on ait une image en entrée, de 5x5 pixels, dont les valeurs de couleur pour l'un des canaux de couleur sont les suivantes:

+ +
0    20  40 235 235
+100 120 140 235 235
+200 220 240 235 235
+225 225 255 255 255
+225 225 255 255 255
+
+ +

et que l'on définit un noyau de convolution de 3x3 comme ceci:

+ +
1 2 3
+4 5 6
+7 8 9
+
+ +

Concentrons-nous sur la valeur de couleur de la deuxième ligne, deuxième colonne (la valeur du pixel source est 120). En supposant le cas le plus simple (quand le quadrillage de pixels de l'image source s'aligne parfaitement avec celui du noyau) et en supposant les valeurs par défaut des attributs divisor, targetX et targetY, alors la valeur de couleur résultante sera :

+ +
(9*  0 + 8* 20 + 7* 40 +
+ 6*100 + 5*120 + 4*140 +
+ 3*200 + 2*220 + 1*240) / (9+8+7+6+5+4+3+2+1)
+ +

Contexte d'utilisation

+ +

{{svginfo}}

+ +

Attributs

+ +

Attributs globaux

+ + + +

Attributs spécifiques

+ +
    +
  • {{SVGAttr("in")}}
    • +
  • {{SVGAttr("order")}}
    • +
  • {{SVGAttr("kernelMatrix")}}
    • +
  • {{SVGAttr("divisor")}}
    • +
  • {{SVGAttr("bias")}}
    • +
  • {{SVGAttr("targetX")}}
    • +
  • {{SVGAttr("targetY")}}
    • +
  • {{SVGAttr("edgeMode")}}
    • +
  • {{SVGAttr("kernelUnitLength")}}
    • +
  • {{SVGAttr("preserveAlpha")}}
    • +
+ +

Interface DOM

+ +

Cet élément implémente l'interface {{domxref("SVGFEConvolveMatrixElement")}}.

+ +

Exemple

+ +

SVG

+ +
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <filter id="emboss">
+      <feConvolveMatrix
+          kernelMatrix="3 0 0
+                        0 0 0
+                        0 0 -3"/>
+    </filter>
+  </defs>
+
+  <image xlink:href="/files/12668/MDN.svg" x="0" y="0"
+      height="200" width="200" style="filter:url(#emboss);" />
+</svg>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple", 200, 210)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("Filters 1.0", "#feConvolveMatrixElement", "<feConvolveMatrix>")}}{{Spec2("Filters 1.0")}} 
{{SpecName("SVG1.1", "filters.html#feConvolveMatrixElement", "<feConvolveMatrix>")}}{{Spec2("SVG1.1")}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.elements.feConvolveMatrix")}}

+ +

Voir aussi

+ +
    +
  • {{SVGElement("filter")}}
    • +
  • {{SVGElement("animate")}}
    • +
  • {{SVGElement("set")}}
    • +
  • {{SVGElement("feBlend")}}
    • +
  • {{SVGElement("feColorMatrix")}}
    • +
  • {{SVGElement("feComponentTransfer")}}
    • +
  • {{SVGElement("feComposite")}}
    • +
  • {{SVGElement("feDiffuseLighting")}}
    • +
  • {{SVGElement("feDisplacementMap")}}
    • +
  • {{SVGElement("feFlood")}}
    • +
  • {{SVGElement("feGaussianBlur")}}
    • +
  • {{SVGElement("feImage")}}
    • +
  • {{SVGElement("feMerge")}}
    • +
  • {{SVGElement("feMorphology")}}
    • +
  • {{SVGElement("feOffset")}}
    • +
  • {{SVGElement("feSpecularLighting")}}
    • +
  • {{SVGElement("feTile")}}
    • +
  • {{SVGElement("feTurbulence")}}
    • +
  • Tutoriel SVG: Filtres
    • +
diff --git a/files/fr/web/svg/element/fediffuselighting/index.html b/files/fr/web/svg/element/fediffuselighting/index.html new file mode 100644 index 0000000000..13607c11c9 --- /dev/null +++ b/files/fr/web/svg/element/fediffuselighting/index.html @@ -0,0 +1,163 @@ +--- +title: +slug: Web/SVG/Element/feDiffuseLighting +tags: + - Element + - SVG + - SVG Filter +translation_of: Web/SVG/Element/feDiffuseLighting +--- +
{{SVGRef}}
+ +

La primitive de filtre SVG <feDiffuseLighting> éclaire une image en utilisant son canal alpha en tant que relief. L'image résultante, qui est une image RGBA opaque, dépend de la couleur de la lumière, de sa position et du relief de l'image en entrée.

+ +

La lumière crée par cette primitive de filtre peut être combinée avec une image de texture à l'aide de l'opérateur arithmetic de la primitive de filtre {{SVGElement("feComposite")}}. De multiples sources lumineuses peuvent être simulées en ajoutant plusieurs éléments à la texture.

+ +

Contexte d'utilisation

+ +

{{svginfo}}

+ +

Attributs

+ +

Attributs globaux

+ + + +

Attributs spécifiques

+ +
    +
  • {{SVGAttr("in")}}
    • +
  • {{SVGAttr("surfaceScale")}}
    • +
  • {{SVGAttr("diffuseConstant")}}
    • +
  • {{SVGAttr("kernelUnitLength")}}
    • +
+ +

Interface DOM

+ +

Cet élément implémente l'interface {{domxref("SVGFEDiffuseLightingElement")}}.

+ +

Exemple

+ +

L'exemple suivant montre l'effet de l'élément <feDiffuseLighting> sur un cercle avec chaque type de lumière disponible. À chaque fois, la lumière vient du coin supérieur gauche.

+ +
<svg width="440" height="140" xmlns="http://www.w3.org/2000/svg">
+
+  <!-- Aucune lumière n'est appliquée -->
+  <text text-anchor="middle" x="60" y="22">No Light</text>
+  <circle cx="60" cy="80" r="50" fill="green" />
+
+  <!-- La source lumineuse est un élément fePointLight -->
+  <text text-anchor="middle" x="170" y="22">fePointLight</text>
+  <filter id="lightMe1">
+    <feDiffuseLighting in="SourceGraphic" result="light"
+        lighting-color="white">
+      <fePointLight x="150" y="60" z="20" />
+    </feDiffuseLighting>
+
+    <feComposite in="SourceGraphic" in2="light"
+                 operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/>
+  </filter>
+
+  <circle cx="170" cy="80" r="50" fill="green"
+      filter="url(#lightMe1)" />
+
+  <!-- La source lumineuse est un élément feDistantLight -->
+  <text text-anchor="middle" x="280" y="22">feDistantLight</text>
+  <filter id="lightMe2">
+    <feDiffuseLighting in="SourceGraphic" result="light"
+        lighting-color="white">
+      <feDistantLight azimuth="240" elevation="20"/>
+    </feDiffuseLighting>
+
+    <feComposite in="SourceGraphic" in2="light"
+                 operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/>
+  </filter>
+
+  <circle cx="280" cy="80" r="50" fill="green"
+      filter="url(#lightMe2)" />
+
+  <!-- La source lumineuse est un élément feSpotLight -->
+  <text text-anchor="middle" x="390" y="22">feSpotLight</text>
+  <filter id="lightMe3">
+    <feDiffuseLighting in="SourceGraphic" result="light"
+        lighting-color="white">
+      <feSpotLight x="360" y="5" z="30" limitingConeAngle="20"
+                   pointsAtX="390" pointsAtY="80" pointsAtZ="0"/>
+    </feDiffuseLighting>
+
+    <feComposite in="SourceGraphic" in2="light"
+                 operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/>
+  </filter>
+
+  <circle cx="390" cy="80" r="50" fill="green"
+      filter="url(#lightMe3)" />
+</svg>
+ +

Résultat attendu:

+ +

Expected rendering for the example

+ +

Rendu en direct:

+ +

{{EmbedLiveSample("Exemple", 470, 170)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Filters 1.0', '#feDiffuseLightingElement', '<feDiffuseLighting>')}}{{Spec2('Filters 1.0')}}Déprécie l'attribut kernelUnitLength
{{SpecName('SVG1.1', 'filters.html#feDiffuseLightingElement', '<feDiffuseLighting>')}}{{Spec2('SVG1.1')}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.elements.feDiffuseLighting")}}

+ +

Voir aussi

+ +
    +
  • {{SVGElement("filter")}}
    • +
  • {{SVGElement("feBlend")}}
    • +
  • {{SVGElement("feColorMatrix")}}
    • +
  • {{SVGElement("feComponentTransfer")}}
    • +
  • {{SVGElement("feComposite")}}
    • +
  • {{SVGElement("feConvolveMatrix")}}
    • +
  • {{SVGElement("feDisplacementMap")}}
    • +
  • {{SVGElement("feDistantLight")}}
    • +
  • {{SVGElement("feFlood")}}
    • +
  • {{SVGElement("feGaussianBlur")}}
    • +
  • {{SVGElement("feImage")}}
    • +
  • {{SVGElement("feMerge")}}
    • +
  • {{SVGElement("feMorphology")}}
    • +
  • {{SVGElement("feOffset")}}
    • +
  • {{SVGElement("fePointLight")}}
    • +
  • {{SVGElement("feSpecularLighting")}}
    • +
  • {{SVGElement("feSpotLight")}}
    • +
  • {{SVGElement("feTile")}}
    • +
  • {{SVGElement("feTurbulence")}}
    • +
  • Tutoriel SVG: Filtres
    • +
diff --git a/files/fr/web/svg/element/fedisplacementmap/index.html b/files/fr/web/svg/element/fedisplacementmap/index.html new file mode 100644 index 0000000000..c7d4a56624 --- /dev/null +++ b/files/fr/web/svg/element/fedisplacementmap/index.html @@ -0,0 +1,119 @@ +--- +title: +slug: Web/SVG/Element/feDisplacementMap +tags: + - Element + - SVG + - SVG Filter +translation_of: Web/SVG/Element/feDisplacementMap +--- +
{{SVGRef}}
+ +

La primitive de filtre SVG <feDisplacementMap> utilise les valeurs de pixel de l'image de {{SVGAttr("in2")}} pour déplacer spatialement l'image de {{SVGAttr("in")}}.

+ +

La formule utilisée pour la transformation est comme suit:

+ +
P'(x,y) ← P( x + scale * (XC(x,y) - 0.5), y + scale * (YC(x,y) - 0.5))
+ +

où P(x,y) est l'image en entrée, {{SVGAttr("in")}}, et P'(x,y) est la destination. XC(x,y) et YC(x,y) sont les valeurs des composants du canal désigné par {{SVGAttr("xChannelSelector")}} et {{SVGAttr("yChannelSelector")}}.

+ +

Contexte d'utilisation

+ +

{{svginfo}}

+ +

Attributs

+ +

Attributs globaux

+ + + +

Attributs spécifiques

+ +
    +
  • {{SVGAttr("in")}}
    • +
  • {{SVGAttr("in2")}}
    • +
  • {{SVGAttr("scale")}}
    • +
  • {{SVGAttr("xChannelSelector")}}
    • +
  • {{SVGAttr("yChannelSelector")}}
    • +
+ +

Interface DOM

+ +

Cet élément implémente l'interface {{domxref("SVGFEDisplacementMapElement")}}.

+ +

Exemple

+ +
<svg width="200" height="200" viewBox="0 0 220 220"
+     xmlns="http://www.w3.org/2000/svg">
+  <filter id="displacementFilter">
+    <feTurbulence type="turbulence" baseFrequency="0.05"
+        numOctaves="2" result="turbulence"/>
+    <feDisplacementMap in2="turbulence" in="SourceGraphic"
+        scale="50" xChannelSelector="R" yChannelSelector="G"/>
+  </filter>
+
+  <circle cx="100" cy="100" r="100"
+      style="filter: url(#displacementFilter)"/>
+</svg>
+ +

{{EmbedLiveSample('Exemple', 220, 220)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Filters 1.0', '#feDisplacementMapElement', '<feDisplacementMap>')}}{{Spec2('Filters 1.0')}}Aucun changement
{{SpecName('SVG1.1', 'filters.html#feDisplacementMapElement', '<feDisplacementMap>')}}{{Spec2('SVG1.1')}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.elements.feDisplacementMap")}}

+ +

Voir aussi

+ +
    +
  • {{SVGElement("filter")}}
    • +
  • {{SVGElement("animate")}}
    • +
  • {{SVGElement("set")}}
    • +
  • {{SVGElement("feBlend")}}
    • +
  • {{SVGElement("feColorMatrix")}}
    • +
  • {{SVGElement("feComponentTransfer")}}
    • +
  • {{SVGElement("feComposite")}}
    • +
  • {{SVGElement("feConvolveMatrix")}}
    • +
  • {{SVGElement("feDiffuseLighting")}}
    • +
  • {{SVGElement("feFlood")}}
    • +
  • {{SVGElement("feGaussianBlur")}}
    • +
  • {{SVGElement("feImage")}}
    • +
  • {{SVGElement("feMerge")}}
    • +
  • {{SVGElement("feMorphology")}}
    • +
  • {{SVGElement("feOffset")}}
    • +
  • {{SVGElement("feSpecularLighting")}}
    • +
  • {{SVGElement("feTile")}}
    • +
  • {{SVGElement("feTurbulence")}}
    • +
  • Tutoriel SVG: Filtres
    • +
diff --git a/files/fr/web/svg/element/fedistantlight/index.html b/files/fr/web/svg/element/fedistantlight/index.html new file mode 100644 index 0000000000..48de9a9195 --- /dev/null +++ b/files/fr/web/svg/element/fedistantlight/index.html @@ -0,0 +1,79 @@ +--- +title: +slug: Web/SVG/Element/feDistantLight +tags: + - Element + - SVG + - SVG Filter + - SVG Light Source +translation_of: Web/SVG/Element/feDistantLight +--- +
{{SVGRef}}
+ +

La primitive de filtre <feDistantLight> définit une source de lumière distante, que l'on place dans une primitive de filtre d'éclairage:{{SVGElement("feDiffuseLighting")}} ou {{SVGElement("feSpecularLighting")}}.

+ +

Contexte d'utilisation

+ +

{{svginfo}}

+ +

Attributs

+ +

Attributs globaux

+ + + +

Attributs spécifiques

+ +
    +
  • {{SVGAttr("azimuth")}}
    • +
  • {{SVGAttr("elevation")}}
    • +
+ +

Interface DOM

+ +

Cet élément implémente l'interface {{domxref("SVGFEDistantLightElement")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Filters 1.0', '#feDistantLightElement', '<feDistantLight>')}}{{Spec2('Filters 1.0')}}Aucun changement
{{SpecName('SVG1.1', 'filters.html#feDistantLightElement', '<feDistantLight>')}}{{Spec2('SVG1.1')}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.elements.feDistantLight")}}

+ +

Voir aussi

+ +
    +
  • {{SVGElement("filter")}}
    • +
  • {{SVGElement("animate")}}
    • +
  • {{SVGElement("set")}}
    • +
  • {{SVGElement("feDiffuseLighting")}}
    • +
  • {{SVGElement("feSpecularLighting")}}
    • +
  • {{SVGElement("fePointLight")}}
    • +
  • {{SVGElement("feSpotLight")}}
    • +
  • Tutoriel SVG: Filtres
    • +
diff --git a/files/fr/web/svg/element/fedropshadow/index.html b/files/fr/web/svg/element/fedropshadow/index.html new file mode 100644 index 0000000000..2c09b7aab5 --- /dev/null +++ b/files/fr/web/svg/element/fedropshadow/index.html @@ -0,0 +1,110 @@ +--- +title: +slug: Web/SVG/Element/feDropShadow +tags: + - Element + - SVG + - SVG Filter +translation_of: Web/SVG/Element/feDropShadow +--- +
{{SVGRef}}
+ +

La primitive de filtre <feDropShadow> crée une ombre portée pour l'image en entrée. Il s'agit d'un raccourci, le résultat du filtre <feDropShadow> revient à appliquer les primitives suivantes:

+ +
<feGaussianBlur in="alpha-channel-of-feDropShadow-in"
+    stdDeviation="stdDeviation-of-feDropShadow"/>
+<feOffset dx="dx-of-feDropShadow" dy="dy-of-feDropShadow"
+    result="offsetblur"/>
+<feFlood flood-color="flood-color-of-feDropShadow"
+    flood-opacity="flood-opacity-of-feDropShadow"/>
+<feComposite in2="offsetblur" operator="in"/>
+<feMerge>
+  <feMergeNode/>
+  <feMergeNode in="in-of-feDropShadow"/>
+</feMerge>
+
+ +

Contexte d'utilisation

+ +

{{svginfo}}

+ +

Attributs

+ +

Attributs globaux

+ + + +

Attributs spécifiques

+ +
    +
  • {{SVGAttr("class")}}
    • +
  • {{SVGAttr("style")}}
    • +
  • {{SVGAttr("in")}}
    • +
  • {{SVGAttr("stdDeviation")}}
    • +
  • {{SVGAttr("dx")}}
    • +
  • {{SVGAttr("dy")}}
    • +
+ +

Interface DOM

+ +

Cet élément implémente l'interface {{domxref("SVGFEDropShadowElement")}}.

+ +

Exemple

+ +

SVG

+ +
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="shadow">
+      <feDropShadow dx="4" dy="8" stdDeviation="4"/>
+    </filter>
+  </defs>
+
+  <circle cx="50%" cy="50%" r="80"
+      style="fill:blue; filter:url(#shadow);"/>
+</svg>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple", 200, 200)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("Filters 1.0", "#feDropShadow", "<feDistantLight>")}}{{Spec2("Filters 1.0")}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.elements.feDropShadow")}}

+ +

Voir aussi

+ +
    +
  • {{SVGElement("filter")}}
    • +
  • {{SVGElement("feGaussianBlur")}}
    • +
  • {{SVGElement("feOffset")}}
    • +
  • {{SVGElement("feFlood")}}
    • +
  • {{SVGElement("feComposite")}}
    • +
  • {{SVGElement("feMerge")}}
    • +
  • Tutoriel SVG: Filtres
    • +
diff --git a/files/fr/web/svg/element/feflood/index.html b/files/fr/web/svg/element/feflood/index.html new file mode 100644 index 0000000000..032a1e655e --- /dev/null +++ b/files/fr/web/svg/element/feflood/index.html @@ -0,0 +1,110 @@ +--- +title: +slug: Web/SVG/Element/feFlood +tags: + - SVG + - SVG Filter +translation_of: Web/SVG/Element/feFlood +--- +
{{SVGRef}}
+ +

La primitive de filtre SVG <feFlood> remplit la région du filtre avec la couleur et l'opacité définies par {{SVGAttr("flood-color")}} et {{SVGAttr("flood-opacity")}}.

+ +

Contexte d'utilisation

+ +

{{svginfo}}

+ +

Attributs

+ +

Attributs globaux

+ + + +

Attributs spécifiques

+ +
    +
  • {{SVGAttr("flood-color")}}
    • +
  • {{SVGAttr("flood-opacity")}}
    • +
+ +

Interface DOM

+ +

Cet élément implémente l'interface {{domxref("SVGFEFloodElement")}}.

+ +

Exemple

+ +
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
+  <defs>
+    <filter id="floodFilter" filterUnits="userSpaceOnUse">
+      <feFlood x="50" y="50" width="100" height="100"
+          flood-color="green" flood-opacity="0.5"/>
+    </filter>
+  </defs>
+
+  <use style="filter: url(#floodFilter);"/>
+</svg>
+ +

{{EmbedLiveSample("Exemple", 200, 200)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Filters 1.0', '#feFloodElement', '<feFlood>')}}{{Spec2('Filters 1.0')}} +

Supprime la valeur <icccolor> de la propriété {{cssxref("flood-color")}} et définit que le canal alpha est multiplié par la valeur de la propriété {{cssxref("flood-opacity")}}. Clarifie la valeur de la propriété flood-opacity.

+
{{SpecName('SVG1.1', 'filters.html#feFloodElement', '<feFlood>')}}{{Spec2('SVG1.1')}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.elements.feFlood")}}

+ +

Voir aussi

+ +
    +
  • {{SVGElement("filter")}}
    • +
  • {{SVGElement("animate")}}
    • +
  • {{SVGElement("animateColor")}}
    • +
  • {{SVGElement("set")}}
    • +
  • {{SVGElement("feBlend")}}
    • +
  • {{SVGElement("feColorMatrix")}}
    • +
  • {{SVGElement("feComponentTransfer")}}
    • +
  • {{SVGElement("feComposite")}}
    • +
  • {{SVGElement("feConvolveMatrix")}}
    • +
  • {{SVGElement("feDiffuseLighting")}}
    • +
  • {{SVGElement("feDisplacementMap")}}
    • +
  • {{SVGElement("feGaussianBlur")}}
    • +
  • {{SVGElement("feImage")}}
    • +
  • {{SVGElement("feMerge")}}
    • +
  • {{SVGElement("feMorphology")}}
    • +
  • {{SVGElement("feOffset")}}
    • +
  • {{SVGElement("feSpecularLighting")}}
    • +
  • {{SVGElement("feTile")}}
    • +
  • {{SVGElement("feTurbulence")}}
    • +
  • Tutoriel SVG: Les filtres
    • +
diff --git a/files/fr/web/svg/element/fefunca/index.html b/files/fr/web/svg/element/fefunca/index.html new file mode 100644 index 0000000000..a6e6a1b071 --- /dev/null +++ b/files/fr/web/svg/element/fefunca/index.html @@ -0,0 +1,76 @@ +--- +title: +slug: Web/SVG/Element/feFuncA +tags: + - Element + - SVG + - SVG Filter +translation_of: Web/SVG/Element/feFuncA +--- +
{{SVGRef}}
+ +

La primitive de filtre SVG <feFuncA> doit être placée dans une balise {{SVGElement("feComponentTransfer")}} et elle définit la fonction de transfert pour le canal alpha (opacité) de l'image en entrée.

+ +

Contexte d'utilisation

+ +

{{svginfo}}

+ +

Attributs

+ +

Attributs globaux

+ + + +

Attributs spécifiques

+ +

Aucun

+ +

Interface DOM

+ +

Cet élément implémente l'interface {{domxref("SVGFEFuncAElement")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("Filters 1.0", "#feFuncAElement", "<feFuncA>")}}{{Spec2("Filters 1.0")}}Aucun changement
{{SpecName("SVG1.1", "filters.html#feFuncAElement", "<feFuncA>")}}{{Spec2("SVG1.1")}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.elements.feFuncA")}}

+ +

Voir aussi

+ +
    +
  • {{SVGElement("filter")}}
    • +
  • {{SVGElement("animate")}}
    • +
  • {{SVGElement("set")}}
    • +
  • {{SVGElement("feComponentTransfer")}}
    • +
  • {{SVGElement("feFuncR")}}
    • +
  • {{SVGElement("feFuncB")}}
    • +
  • {{SVGElement("feFuncG")}}
    • +
  • Tutoriel SVG: Filtres
    • +
diff --git a/files/fr/web/svg/element/fefuncb/index.html b/files/fr/web/svg/element/fefuncb/index.html new file mode 100644 index 0000000000..739b0c3b44 --- /dev/null +++ b/files/fr/web/svg/element/fefuncb/index.html @@ -0,0 +1,76 @@ +--- +title: +slug: Web/SVG/Element/feFuncB +tags: + - Element + - SVG + - SVG Filter +translation_of: Web/SVG/Element/feFuncB +--- +
{{SVGRef}}
+ +

La primitive de filtre SVG <feFuncB> doit être placée dans une balise {{SVGElement("feComponentTransfer")}} et elle définit la fonction de transfert pour le canal bleu de l'image en entrée.

+ +

Contexte d'utilisation

+ +

{{svginfo}}

+ +

Attributs

+ +

Attributs globaux

+ + + +

Attributs spécifiques

+ +

Aucun

+ +

Interface DOM

+ +

Cet élément implémente l'interface {{domxref("SVGFEFuncBElement")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Filters 1.0', '#feFuncBElement', '<feFuncB>')}}{{Spec2('Filters 1.0')}}Aucun changement
{{SpecName('SVG1.1', 'filters.html#feFuncBElement', '<feFuncB>')}}{{Spec2('SVG1.1')}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.elements.feFuncB")}}

+ +

Voir aussi

+ +
    +
  • {{SVGElement("filter")}}
    • +
  • {{SVGElement("animate")}}
    • +
  • {{SVGElement("set")}}
    • +
  • {{SVGElement("feComponentTransfer")}}
    • +
  • {{SVGElement("feFuncA")}}
    • +
  • {{SVGElement("feFuncR")}}
    • +
  • {{SVGElement("feFuncG")}}
    • +
  • Tutoriel SVG: Filtres
    • +
diff --git a/files/fr/web/svg/element/fefuncg/index.html b/files/fr/web/svg/element/fefuncg/index.html new file mode 100644 index 0000000000..82bb7745ec --- /dev/null +++ b/files/fr/web/svg/element/fefuncg/index.html @@ -0,0 +1,76 @@ +--- +title: +slug: Web/SVG/Element/feFuncG +tags: + - Element + - SVG + - SVG Filter +translation_of: Web/SVG/Element/feFuncG +--- +
{{SVGRef}}
+ +

La primitive de filtre SVG <feFuncG> doit être placée dans une balise {{SVGElement("feComponentTransfer")}} et elle définit la fonction de transfert pour le canal vert de l'image en entrée.

+ +

Contexte d'utilisation

+ +

{{svginfo}}

+ +

Attributs

+ +

Attributs globaux

+ + + +

Attributs spécifiques

+ +

Aucun

+ +

Interface DOM

+ +

Cet élément implémente l'interface {{domxref("SVGFEFuncGElement")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("Filters 1.0", "#feFuncGElement", "<feFuncG>")}}{{Spec2("Filters 1.0")}}Aucun changement
{{SpecName("SVG1.1", "filters.html#feFuncGElement", "<feFuncG>")}}{{Spec2("SVG1.1")}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.elements.feFuncG")}}

+ +

Voir aussi

+ +
    +
  • {{SVGElement("filter")}}
    • +
  • {{SVGElement("animate")}}
    • +
  • {{SVGElement("set")}}
    • +
  • {{SVGElement("feComponentTransfer")}}
    • +
  • {{SVGElement("feFuncA")}}
    • +
  • {{SVGElement("feFuncR")}}
    • +
  • {{SVGElement("feFuncB")}}
    • +
  • Tutoriel SVG: Filtres
    • +
diff --git a/files/fr/web/svg/element/fefuncr/index.html b/files/fr/web/svg/element/fefuncr/index.html new file mode 100644 index 0000000000..99a9217479 --- /dev/null +++ b/files/fr/web/svg/element/fefuncr/index.html @@ -0,0 +1,76 @@ +--- +title: +slug: Web/SVG/Element/feFuncR +tags: + - Element + - SVG + - SVG Filter +translation_of: Web/SVG/Element/feFuncR +--- +
{{SVGRef}}
+ +

La primitive de filtre SVG <feFuncR> doit être placée dans une balise {{SVGElement("feComponentTransfer")}} et elle définit la fonction de transfert pour le canal rouge de l'image en entrée.

+ +

Contexte d'utilisation

+ +

{{svginfo}}

+ +

Attributs

+ +

Attributs globaux

+ + + +

Attributs spécifiques

+ +

Aucun

+ +

Interface DOM

+ +

Cet élément implémente l'interface {{domxref("SVGFEFuncRElement")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Filters 1.0', '#feFuncRElement', '<feFuncR>')}}{{Spec2('Filters 1.0')}}Aucun changement
{{SpecName('SVG1.1', 'filters.html#feFuncRElement', '<feFuncR>')}}{{Spec2('SVG1.1')}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.elements.feFuncR")}}

+ +

Voir aussi

+ +
    +
  • {{SVGElement("filter")}}
    • +
  • {{SVGElement("animate")}}
    • +
  • {{SVGElement("set")}}
    • +
  • {{SVGElement("feComponentTransfer")}}
    • +
  • {{SVGElement("feFuncA")}}
    • +
  • {{SVGElement("feFuncB")}}
    • +
  • {{SVGElement("feFuncG")}}
    • +
  • Tutoriel SVG: Filtres
    • +
diff --git a/files/fr/web/svg/element/fegaussianblur/index.html b/files/fr/web/svg/element/fegaussianblur/index.html new file mode 100644 index 0000000000..d035647b55 --- /dev/null +++ b/files/fr/web/svg/element/fegaussianblur/index.html @@ -0,0 +1,141 @@ +--- +title: +slug: Web/SVG/Element/feGaussianBlur +tags: + - Element + - SVG + - SVG Filter +translation_of: Web/SVG/Element/feGaussianBlur +--- +
{{SVGRef}}
+ +

La primitive de filtre SVG <feGaussianBlur> applique un effet de flou à l'image en entrée. La quantité de flou est contrôlée par {{SVGAttr("stdDeviation")}}.

+ +

Contexte d'utilisation

+ +

{{svginfo}}

+ +

Attributs

+ +

Attributs globaux

+ + + +

Attributs spécifiques

+ +
    +
  • {{SVGAttr("in")}}
    • +
  • {{SVGAttr("stdDeviation")}}
    • +
  • {{SVGAttr("edgeMode")}}
    • +
+ +

Interface DOM

+ +

Cet élément implémente l'interface {{domxref("SVGFEGaussianBlurElement")}}.

+ +

Exemple

+ +

Exemple simple

+ +

SVG

+ +
<svg width="230" height="120"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+
+  <filter id="blurMe">
+    <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
+  </filter>
+
+  <circle cx="60"  cy="60" r="50" fill="green" />
+
+  <circle cx="170" cy="60" r="50" fill="green"
+          filter="url(#blurMe)" />
+</svg>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple_simple",232,124,"/files/4227/feGaussianBlur.png")}}

+ +

Exemple d'ombre portée

+ +

SVG

+ +
<svg width="120" height="120"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+
+  <filter id="dropShadow">
+    <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
+    <feOffset dx="2" dy="4" />
+    <feMerge>
+        <feMergeNode />
+        <feMergeNode in="SourceGraphic" />
+    </feMerge>
+  </filter>
+
+  <circle cx="60"  cy="60" r="50" fill="green"
+          filter="url(#dropShadow)" />
+</svg>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple_d'ombre_portée",125,124,"/files/4229/feGaussianBlur-dropshadow.png")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Filters 1.0', '#feGaussianBlurElement', '<feGaussianBlur>')}}{{Spec2('Filters 1.0')}}Ajoute l'attribut {{SVGAttr("edgeMode")}}
{{SpecName('SVG1.1', 'filters.html#feGaussianBlurElement', '<feGaussianBlur>')}}{{Spec2('SVG1.1')}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.elements.feGaussianBlur")}}

+ +

Voir aussi

+ +
    +
  • {{SVGElement("filter")}}
    • +
  • {{SVGElement("feBlend")}}
    • +
  • {{SVGElement("feColorMatrix")}}
    • +
  • {{SVGElement("feComponentTransfer")}}
    • +
  • {{SVGElement("feComposite")}}
    • +
  • {{SVGElement("feConvolveMatrix")}}
    • +
  • {{SVGElement("feDiffuseLighting")}}
    • +
  • {{SVGElement("feDisplacementMap")}}
    • +
  • {{SVGElement("feFlood")}}
    • +
  • {{SVGElement("feImage")}}
    • +
  • {{SVGElement("feMerge")}}
    • +
  • {{SVGElement("feMorphology")}}
    • +
  • {{SVGElement("feOffset")}}
    • +
  • {{SVGElement("feSpecularLighting")}}
    • +
  • {{SVGElement("feTile")}}
    • +
  • {{SVGElement("feTurbulence")}}
    • +
  • Tutoriel SVG: Filtres
    • +
diff --git a/files/fr/web/svg/element/feimage/index.html b/files/fr/web/svg/element/feimage/index.html new file mode 100644 index 0000000000..4bcb92a1d5 --- /dev/null +++ b/files/fr/web/svg/element/feimage/index.html @@ -0,0 +1,111 @@ +--- +title: +slug: Web/SVG/Element/feImage +tags: + - SVG + - SVG Filter +translation_of: Web/SVG/Element/feImage +--- +
{{SVGRef}}
+ +

La primitive de filtre SVG <feImage> extrait les données d'une image d'une source externe et retourne les pixels récupérés en sortie (autrement dit, si l'image récupérée est une image SVG, elle sortira comme raster)

+ +

Contexte d'utilisation

+ +

{{svginfo}}

+ +

Attributs

+ +

Attributs globaux

+ + + +

Attributs spécifiques

+ +
    +
  • {{SVGAttr("preserveAspectRatio")}}
    • +
  • {{SVGAttr("xlink:href")}}
    • +
+ +

Interface DOM

+ +

Cet élément implémente l'interface {{domxref("SVGFEImageElement")}}.

+ +

Exemple

+ +
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <filter id="image">
+      <feImage xlink:href="/files/6457/mdn_logo_only_color.png"/>
+    </filter>
+  </defs>
+
+  <rect x="10%" y="10%" width="80%" height="80%"
+      style="filter:url(#image);"/>
+</svg>
+ +

{{EmbedLiveSample("Exemple", 200, 200)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("Filters 1.0", "#feImageElement", "<feImage>")}}{{Spec2("Filters 1.0")}}Ajoute l'attribut {{SVGAttr("href")}} et déprécie {{SVGAttr("xlink:href")}}. Ajoute l'attribut {{SVGAttr("crossorigin")}}.
{{SpecName("SVG1.1", "filters.html#feImageElement", "<feImage>")}}{{Spec2("SVG1.1")}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.elements.feImage")}}

+ +

Voir aussi

+ +
    +
  • {{SVGElement("filter")}}
    • +
  • {{SVGElement("animate")}}
    • +
  • {{SVGElement("animateTransform")}}
    • +
  • {{SVGElement("set")}}
    • +
  • {{SVGElement("feBlend")}}
    • +
  • {{SVGElement("feColorMatrix")}}
    • +
  • {{SVGElement("feComponentTransfer")}}
    • +
  • {{SVGElement("feComposite")}}
    • +
  • {{SVGElement("feConvolveMatrix")}}
    • +
  • {{SVGElement("feDiffuseLighting")}}
    • +
  • {{SVGElement("feDisplacementMap")}}
    • +
  • {{SVGElement("feFlood")}}
    • +
  • {{SVGElement("feGaussianBlur")}}
    • +
  • {{SVGElement("feMerge")}}
    • +
  • {{SVGElement("feMorphology")}}
    • +
  • {{SVGElement("feOffset")}}
    • +
  • {{SVGElement("feSpecularLighting")}}
    • +
  • {{SVGElement("feTile")}}
    • +
  • {{SVGElement("feTurbulence")}}
    • +
  • Tutoriel SVG: Les filtres
    • +
diff --git a/files/fr/web/svg/element/femerge/index.html b/files/fr/web/svg/element/femerge/index.html new file mode 100644 index 0000000000..7341125bec --- /dev/null +++ b/files/fr/web/svg/element/femerge/index.html @@ -0,0 +1,113 @@ +--- +title: +slug: Web/SVG/Element/feMerge +tags: + - Element + - SVG Filter +translation_of: Web/SVG/Element/feMerge +--- +
{{SVGRef}}
+ +

La primitive de filtre SVG <feMerge> permet d'empiler les résultats de différentes opérations de filtre les uns par dessus les autres. La liste des images à empiler est définit par une liste d'élément {{ SVGElement("feMergeNode") }} à l'intérieur de la balise. Pour y parvenir, stocker au préalable les résultats des filtres voulus dans un buffer temporaire grâce à l'attribut {{ SVGAttr("result") }}.

+ +

Contexte d'utilisation

+ +

{{svginfo}}

+ +

Exemple

+ +

SVG

+ +
<svg width="200" height="200"
+  xmlns="http://www.w3.org/2000/svg">
+
+  <filter id="feOffset" x="-40" y="-20" width="100" height="200">
+    <feOffset in="SourceGraphic" dx="60" dy="60" />
+    <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur2" />
+    <feMerge>
+      <feMergeNode in="blur2" />
+      <feMergeNode in="SourceGraphic" />
+    </feMerge>
+  </filter>
+
+  <rect x="40" y="40" width="100" height="100"
+    style="stroke: #000000; fill: green; filter: url(#feOffset);" />
+</svg>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemple', 200, 200)}}

+ +

Attributs

+ +

Attributs globaux

+ + + +

Attributs spécifiques

+ +

Aucun

+ +

Interface DOM

+ +

Cet élément implémente l'interface {{domxref("SVGFEMergeElement")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Filters 1.0', '#feMergeElement', '<feMerge>')}}{{Spec2('Filters 1.0')}}Aucun changement
{{SpecName('SVG1.1', 'filters.html#feMergeElement', '<feMerge>')}}{{Spec2('SVG1.1')}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.elements.feMerge")}}

+ +

Voir aussi

+ +
    +
  • {{SVGElement("filter")}}
    • +
  • {{SVGElement("feBlend")}}
    • +
  • {{SVGElement("feColorMatrix")}}
    • +
  • {{SVGElement("feComponentTransfer")}}
    • +
  • {{SVGElement("feComposite")}}
    • +
  • {{SVGElement("feConvolveMatrix")}}
    • +
  • {{SVGElement("feDiffuseLighting")}}
    • +
  • {{SVGElement("feDisplacementMap")}}
    • +
  • {{SVGElement("feFlood")}}
    • +
  • {{SVGElement("feGaussianBlur")}}
    • +
  • {{SVGElement("feImage")}}
    • +
  • {{SVGElement("feMergeNode")}}
    • +
  • {{SVGElement("feMorphology")}}
    • +
  • {{SVGElement("feOffset")}}
    • +
  • {{SVGElement("feSpecularLighting")}}
    • +
  • {{SVGElement("feTile")}}
    • +
  • {{SVGElement("feTurbulence")}}
    • +
  • Tutoriel SVG: Filtres
    • +
diff --git a/files/fr/web/svg/element/femergenode/index.html b/files/fr/web/svg/element/femergenode/index.html new file mode 100644 index 0000000000..ff3ee3fb54 --- /dev/null +++ b/files/fr/web/svg/element/femergenode/index.html @@ -0,0 +1,100 @@ +--- +title: +slug: Web/SVG/Element/feMergeNode +tags: + - Element + - SVG + - SVG Filter +translation_of: Web/SVG/Element/feMergeNode +--- +
{{SVGRef}}
+ +

L'élément SVG feMergeNode se place à l'intérieur d'un élément {{ SVGElement("feMerge") }}. Il prend en entrée le résultat d'un filtre afin qu'il soit traité par son parent.

+ +

Contexte d'utilisation

+ +

{{svginfo}}

+ +

Exemple

+ +
<svg width="200" height="200"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+
+    <filter id="feOffset" x="-40" y="-20" width="100" height="200">
+        <feOffset in="SourceGraphic" dx="60" dy="60" />
+        <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur2" />
+        <feMerge>
+            <feMergeNode in="blur2" />
+            <feMergeNode in="SourceGraphic" />
+        </feMerge>
+    </filter>
+
+    <rect x="40" y="40" width="100" height="100"
+       style="stroke: #000000; fill: green; filter: url(#feOffset);" />
+    <rect x="40" y="40" width="100" height="100"
+        style="stroke: #000000; fill: green;" />
+</svg>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemple', 200, 200)}}

+ +

Attributs

+ +

Attributs globaux

+ + + +

Attributs spécifiques

+ +
    +
  • {{ SVGAttr("in") }}
    • +
+ +

Interface DOM

+ +

Cet élément implémente l'interface {{domxref("SVGFEMergeNodeElement")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Filters 1.0', '#elementdef-femergenode', '<feMergeNode>')}}{{Spec2('Filters 1.0')}} 
{{SpecName('SVG1.1', 'filters.html#feMergeNodeElement', '<feMergeNode>')}}{{Spec2('SVG1.1')}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.elements.feMergeNode")}}

+ +

Voir aussi

+ +
    +
  • {{ SVGElement("filter") }}
    • +
  • {{ SVGElement("animate") }}
    • +
  • {{ SVGElement("set") }}
    • +
  • {{ SVGElement("feMerge") }}
    • +
  • Tutoriel SVG: Filtres
    • +
diff --git a/files/fr/web/svg/element/femorphology/index.html b/files/fr/web/svg/element/femorphology/index.html new file mode 100644 index 0000000000..2e676cbd67 --- /dev/null +++ b/files/fr/web/svg/element/femorphology/index.html @@ -0,0 +1,165 @@ +--- +title: +slug: Web/SVG/Element/feMorphology +tags: + - Element + - SVG + - SVG Filter +translation_of: Web/SVG/Element/feMorphology +--- +
{{SVGRef}}
+ +

La primitive de filtre SVG <feMorphology> est utilisée pour éroder ou dilater l'image en entrée. Cela permet d'appliquer des effets de mise en gras ou d'amincissement.

+ +

Contexte d'utilisation

+ +

{{svginfo}}

+ +

Attributs

+ +

Attributs globaux

+ + + +

Attributs spécifiques

+ +
    +
  • {{SVGAttr("in")}}
    • +
  • {{SVGAttr("operator")}}
    • +
  • {{SVGAttr("radius")}}
    • +
+ +

Interface DOM

+ +

Cet élément implémente l'interface {{domxref("SVGFEMorphologyElement")}}.

+ +

Exemples

+ +

Sur du contenu SVG

+ +

SVG

+ +
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="180">
+  <filter id="erode">
+    <feMorphology operator="erode" radius="1"/>
+  </filter>
+  <filter id="dilate">
+    <feMorphology operator="dilate" radius="2"/>
+  </filter>
+  <text y="1em">Texte normal</text>
+  <text id="thin" y="2em">Texte mince</text>
+  <text id="thick" y="3em">Text gras</text>
+</svg>
+
+ +

CSS

+ +
text {
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 3em;
+}
+
+#thin {
+  filter: url(#erode);
+}
+
+#thick {
+  filter: url(#dilate);
+}
+ +

{{EmbedLiveSample("Sur_du_contenu_SVG", 340, 180)}}

+ +

Sur du contenu HTML

+ +

SVG

+ +
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
+  <filter id="erode">
+    <feMorphology operator="erode" radius="1"/>
+  </filter>
+  <filter id="dilate">
+    <feMorphology operator="dilate" radius="2"/>
+  </filter>
+</svg>
+
+<p>Texte normal</p>
+<p id="thin">Texte mince</p>
+<p id="thick">Text gras</p>
+ +

CSS

+ +
p {
+  margin: 0;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 3em;
+}
+
+#thin {
+  filter: url(#erode);
+}
+
+#thick {
+  filter: url(#dilate);
+}
+ +

{{EmbedLiveSample("Sur_du_contenu_HTML", 340, 180)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("Filters 1.0", "#feMorphologyElement", "<feMorphology>")}}{{Spec2("Filters 1.0")}}Aucun changement
{{SpecName("SVG1.1", "filters.html#feMorphologyElement", "<feMorphology>")}}{{Spec2("SVG1.1")}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.elements.feMorphology")}}

+ +

Voir aussi

+ +
    +
  • {{SVGElement("filter")}}
    • +
  • {{SVGElement("animate")}}
    • +
  • {{SVGElement("set")}}
    • +
  • {{SVGElement("feBlend")}}
    • +
  • {{SVGElement("feColorMatrix")}}
    • +
  • {{SVGElement("feComponentTransfer")}}
    • +
  • {{SVGElement("feComposite")}}
    • +
  • {{SVGElement("feConvolveMatrix")}}
    • +
  • {{SVGElement("feDiffuseLighting")}}
    • +
  • {{SVGElement("feDisplacementMap")}}
    • +
  • {{SVGElement("feFlood")}}
    • +
  • {{SVGElement("feGaussianBlur")}}
    • +
  • {{SVGElement("feImage")}}
    • +
  • {{SVGElement("feMerge")}}
    • +
  • {{SVGElement("feOffset")}}
    • +
  • {{SVGElement("feSpecularLighting")}}
    • +
  • {{SVGElement("feTile")}}
    • +
  • {{SVGElement("feTurbulence")}}
    • +
  • Tutoriel SVG: Filtres
    • +
diff --git a/files/fr/web/svg/element/feoffset/index.html b/files/fr/web/svg/element/feoffset/index.html new file mode 100644 index 0000000000..75caf5065c --- /dev/null +++ b/files/fr/web/svg/element/feoffset/index.html @@ -0,0 +1,112 @@ +--- +title: +slug: Web/SVG/Element/feOffset +tags: + - SVG + - SVG Filter +translation_of: Web/SVG/Element/feOffset +--- +
{{SVGRef}}
+ +

La primitive de filtre <feOffset> permet de décaler l'image qu'elle a en entrée selon les attributs {{SVGAttr("dx")}} et {{SVGAttr("dy")}}.

+ +

Contexte d'utilisation

+ +

{{svginfo}}

+ +

Attributs

+ +

Attributs globaux

+ + + +

Attributs spécifiques

+ +
    +
  • {{SVGAttr("in")}}
    • +
  • {{SVGAttr("dx")}}
    • +
  • {{SVGAttr("dy")}}
    • +
+ +

Interface DOM

+ +

Cet élément implémente l'interface {{domxref("SVGFEOffsetElement")}}.

+ +

Exemple

+ +

SVG

+ +
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="offset" width="180" height="180">
+      <feOffset in="SourceGraphic" dx="60" dy="60" />
+    </filter>
+  </defs>
+
+  <rect x="0" y="0" width="100" height="100" stroke="black" fill="green"/>
+  <rect x="0" y="0" width="100" height="100" stroke="black" fill="green" filter="url(#offset)"/>
+</svg>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple", 200, 200)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Filters 1.0', '#feOffsetElement', '<feOffset>')}}{{Spec2('Filters 1.0')}}Aucun changement
{{SpecName('SVG1.1', 'filters.html#feOffsetElement', '<feOffset>')}}{{Spec2('SVG1.1')}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.elements.feOffset")}}

+ +

Voir aussi

+ +
    +
  • {{SVGElement("filter")}}
    • +
  • {{SVGElement("animate")}}
    • +
  • {{SVGElement("set")}}
    • +
  • {{SVGElement("feBlend")}}
    • +
  • {{SVGElement("feColorMatrix")}}
    • +
  • {{SVGElement("feComponentTransfer")}}
    • +
  • {{SVGElement("feComposite")}}
    • +
  • {{SVGElement("feConvolveMatrix")}}
    • +
  • {{SVGElement("feDiffuseLighting")}}
    • +
  • {{SVGElement("feDisplacementMap")}}
    • +
  • {{SVGElement("feFlood")}}
    • +
  • {{SVGElement("feGaussianBlur")}}
    • +
  • {{SVGElement("feImage")}}
    • +
  • {{SVGElement("feMerge")}}
    • +
  • {{SVGElement("feMorphology")}}
    • +
  • {{SVGElement("feSpecularLighting")}}
    • +
  • {{SVGElement("feTile")}}
    • +
  • {{SVGElement("feTurbulence")}}
    • +
  • Tutoriel SVG: Effets de filtre
    • +
diff --git a/files/fr/web/svg/element/fepointlight/index.html b/files/fr/web/svg/element/fepointlight/index.html new file mode 100644 index 0000000000..f4c61aa944 --- /dev/null +++ b/files/fr/web/svg/element/fepointlight/index.html @@ -0,0 +1,105 @@ +--- +title: +slug: Web/SVG/Element/fePointLight +tags: + - Element + - SVG + - SVG Filter + - SVG Light Source +translation_of: Web/SVG/Element/fePointLight +--- +
{{SVGRef}}
+ +

La primitive de filtre <fePointLight> définit une source de lumière qui permet de créer un point lumineux. On la place dans une primitive de filtre d'éclairage: {{SVGElement("feDiffuseLighting")}} or {{SVGElement("feSpecularLighting")}}.

+ +

Contexte d'utilisation

+ +

{{svginfo}}

+ +

Attributs

+ +

Attributs globaux

+ + + +

Attributs spécifiques

+ +
    +
  • {{SVGAttr("x")}}
    • +
  • {{SVGAttr("y")}}
    • +
  • {{SVGAttr("z")}}
    • +
+ +

Interface DOM

+ +

Cet élément implémente l'interface {{domxref("SVGFEPointLightElement")}}.

+ +

Exemple

+ +

SVG

+ +
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <filter id="spotlight">
+      <feSpecularLighting result="spotlight" specularConstant="1.5"
+          specularExponent="80" lighting-color="#FFF">
+        <fePointLight x="50" y="50" z="220"/>
+      </feSpecularLighting>
+      <feComposite in="SourceGraphic" in2="spotlight" operator="arithmetic"
+          k1="0" k2="1" k3="1" k4="0"/>
+    </filter>
+  </defs>
+
+  <image xlink:href="/files/6457/mdn_logo_only_color.png" x="10%" y="10%"
+      width="80%" height="80%" style="filter:url(#spotlight);"/>
+</svg>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple", 200, 200)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Filters 1.0', '#fePointLightElement', '<fePointLight>')}}{{Spec2('Filters 1.0')}}Aucun changement
{{SpecName('SVG1.1', 'filters.html#fePointLightElement', '<fePointLight>')}}{{Spec2('SVG1.1')}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.elements.fePointLight")}}

+ +

Voir aussi

+ +
    +
  • {{SVGElement("filter")}}
    • +
  • {{SVGElement("animate")}}
    • +
  • {{SVGElement("set")}}
    • +
  • {{SVGElement("feDiffuseLighting")}}
    • +
  • {{SVGElement("feSpecularLighting")}}
    • +
  • {{SVGElement("feDistantLight")}}
    • +
  • {{SVGElement("feSpotLight")}}
    • +
  • Tutoriel SVG: Filtres
    • +
diff --git a/files/fr/web/svg/element/fespecularlighting/index.html b/files/fr/web/svg/element/fespecularlighting/index.html new file mode 100644 index 0000000000..c7c6738409 --- /dev/null +++ b/files/fr/web/svg/element/fespecularlighting/index.html @@ -0,0 +1,119 @@ +--- +title: +slug: Web/SVG/Element/feSpecularLighting +tags: + - Element + - SVG + - SVG Filter + - SVG Light Source +translation_of: Web/SVG/Element/feSpecularLighting +--- +
{{SVGRef}}
+ +

La primitive de filtre SVG <feSpecularLighting> éclaire une image en utilisant son canal alpha en tant que relief. L'image résultante est une image RGBA qui dépend de la couleur de la lumière, de sa position et du relief de l'image en entrée. Le calcul de l'éclairage se fait suivant le modèle d'illumination de Phong.

+ +

La lumière crée par cette primitive de filtre peut être combinée avec une image de texture à l'aide de l'opérateur arithmetic de la primitive de filtre {{SVGElement("feComposite")}}. De multiples sources lumineuses peuvent être simulées en ajoutant plusieurs éléments à la texture.

+ +

Contexte d'utilisation

+ +

{{svginfo}}

+ +

Attributs

+ +

Attributs globaux

+ + + +

Attributs spécifiques

+ +
    +
  • {{SVGAttr("in")}}
    • +
  • {{SVGAttr("surfaceScale")}}
    • +
  • {{SVGAttr("specularConstant")}}
    • +
  • {{SVGAttr("specularExponent")}}
    • +
  • {{SVGAttr("kernelUnitLength")}}
    • +
+ +

Interface DOM

+ +

Cet élément implémente l'interface {{domxref("SVGFESpecularLightingElement")}}.

+ +

Exemple

+ +
<svg height="200" width="200" viewBox="0 0 220 220"
+    xmlns="http://www.w3.org/2000/svg">
+  <filter id = "filter">
+    <feSpecularLighting result="specOut"
+        specularExponent="20" lighting-color="#bbbbbb">
+      <fePointLight x="50" y="75" z="200"/>
+    </feSpecularLighting>
+    <feComposite in="SourceGraphic" in2="specOut"
+        operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/>
+  </filter>
+  <circle cx="110" cy="110" r="100" style="filter:url(#filter)"/>
+</svg>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple", 220, 220)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Filters 1.0', '#feSpecularLightingElement', '<feSpecularLighting>')}}{{Spec2('Filters 1.0')}}Suppression de la limitation sur l'attribut specularExponent.
{{SpecName('SVG1.1', 'filters.html#feSpecularLightingElement', '<feSpecularLighting>')}}{{Spec2('SVG1.1')}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.elements.feSpecularLighting")}}

+ +

Voir aussi

+ +
    +
  • {{SVGElement("filter")}}
    • +
  • {{SVGElement("feBlend")}}
    • +
  • {{SVGElement("feColorMatrix")}}
    • +
  • {{SVGElement("feComponentTransfer")}}
    • +
  • {{SVGElement("feComposite")}}
    • +
  • {{SVGElement("feConvolveMatrix")}}
    • +
  • {{SVGElement("feDiffuseLighting")}}
    • +
  • {{SVGElement("feDisplacementMap")}}
    • +
  • {{SVGElement("feDistantLight")}}
    • +
  • {{SVGElement("feFlood")}}
    • +
  • {{SVGElement("feGaussianBlur")}}
    • +
  • {{SVGElement("feImage")}}
    • +
  • {{SVGElement("feMerge")}}
    • +
  • {{SVGElement("feMorphology")}}
    • +
  • {{SVGElement("feOffset")}}
    • +
  • {{SVGElement("fePointLight")}}
    • +
  • {{SVGElement("feSpotLight")}}
    • +
  • {{SVGElement("feTile")}}
    • +
  • {{SVGElement("feTurbulence")}}
    • +
  • Tutoriel SVG: Filtres
    • +
diff --git a/files/fr/web/svg/element/fespotlight/index.html b/files/fr/web/svg/element/fespotlight/index.html new file mode 100644 index 0000000000..41d78dc112 --- /dev/null +++ b/files/fr/web/svg/element/fespotlight/index.html @@ -0,0 +1,110 @@ +--- +title: +slug: Web/SVG/Element/feSpotLight +tags: + - Element + - SVG + - SVG Filter + - SVG Light Source +translation_of: Web/SVG/Element/feSpotLight +--- +
{{SVGRef}}
+ +

La primitive de filtre SVG <feSpotLight> définit une source de lumière qui permet de créer un feu de projecteur. On la place dans une primitive de filtre d'éclairage: {{SVGElement("feDiffuseLighting")}} ou {{SVGElement("feSpecularLighting")}}.

+ +

Contexte d'utilisation

+ +

{{svginfo}}

+ +

Attributs

+ +

Attributs globaux

+ + + +

Attributs spécifiques

+ +
    +
  • {{SVGAttr("x")}}
    • +
  • {{SVGAttr("y")}}
    • +
  • {{SVGAttr("z")}}
    • +
  • {{SVGAttr("pointsAtX")}}
    • +
  • {{SVGAttr("pointsAtY")}}
    • +
  • {{SVGAttr("pointsAtZ")}}
    • +
  • {{SVGAttr("specularExponent")}}
    • +
  • {{SVGAttr("limitingConeAngle")}}
    • +
+ +

Interface DOM

+ +

Cet élément implémente l'interface {{domxref("SVGFESpotLightElement")}}.

+ +

Exemple

+ +

SVG

+ +
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <filter id="spotlight">
+      <feSpecularLighting result="spotlight" specularConstant="1.5"
+          specularExponent="4" lighting-color="#FFF">
+        <feSpotLight x="600" y="600" z="400" limitingConeAngle="5.5" />
+      </feSpecularLighting>
+      <feComposite in="SourceGraphic" in2="spotlight" operator="out"
+          k1="0" k2="1" k3="1" k4="0"/>
+    </filter>
+  </defs>
+
+  <image xlink:href="/files/6457/mdn_logo_only_color.png" x="10%" y="10%"
+      width="80%" height="80%" style="filter:url(#spotlight);"/>
+</svg>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple", 200, 200)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("Filters 1.0", "#feSpotLightElement", "<feSpotLight>")}}{{Spec2("Filters 1.0")}}Aucun changement
{{SpecName("SVG1.1", "filters.html#feSpotLightElement", "<feSpotLight>")}}{{Spec2("SVG1.1")}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.elements.feSpotLight")}}

+ +

Voir aussi

+ +
    +
  • {{SVGElement("filter")}}
    • +
  • {{SVGElement("animate")}}
    • +
  • {{SVGElement("set")}}
    • +
  • {{SVGElement("feDiffuseLighting")}}
    • +
  • {{SVGElement("feSpecularLighting")}}
    • +
  • {{SVGElement("feDistantLight")}}
    • +
  • {{SVGElement("fePointLight")}}
    • +
  • Tutoriel SVG: Filtres
    • +
diff --git a/files/fr/web/svg/element/fetile/index.html b/files/fr/web/svg/element/fetile/index.html new file mode 100644 index 0000000000..5b015c82db --- /dev/null +++ b/files/fr/web/svg/element/fetile/index.html @@ -0,0 +1,115 @@ +--- +title: +slug: Web/SVG/Element/feTile +tags: + - Element + - SVG + - SVG Filter +translation_of: Web/SVG/Element/feTile +--- +
{{SVGRef}}
+ +

La primitive de filtre SVG <feTile> permet de remplir un rectangle cible avec un motif en mosaïque qui répète une image en entrée. L'effet est similaire à ce que l'on obtient avec {{SVGElement("pattern")}}.

+ +

Contexte d'utilisation

+ +

{{svginfo}}

+ +

Attributs

+ +

Attributs globaux

+ + + +

Attributs spécifiques

+ +
    +
  • {{SVGAttr("in")}}
    • +
+ +

Interface DOM

+ +

Cet élément implémente l'interface {{domxref("SVGFETileElement")}}.

+ +

Exemple

+ +

SVG

+ +
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <filter id="tile" x="0" y="0" width="100%" height="100%">
+      <feTile in="SourceGraphic" x="50" y="50"
+          width="100" height="100" />
+      <feTile/>
+    </filter>
+  </defs>
+
+  <image xlink:href="/files/6457/mdn_logo_only_color.png"
+      x="10%" y="10%" width="80%" height="80%"
+      style="filter:url(#tile);"/>
+</svg>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple", 200, 200)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Filters 1.0', '#feTileElement', '<feTile>')}}{{Spec2('Filters 1.0')}}Aucun changement
{{SpecName('SVG1.1', 'filters.html#feTileElement', '<feTile>')}}{{Spec2('SVG1.1')}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.elements.feTile")}}

+ +

Voir aussi

+ +
    +
  • {{SVGElement("filter")}}
    • +
  • {{SVGElement("animate")}}
    • +
  • {{SVGElement("set")}}
    • +
  • {{SVGElement("feBlend")}}
    • +
  • {{SVGElement("feColorMatrix")}}
    • +
  • {{SVGElement("feComponentTransfer")}}
    • +
  • {{SVGElement("feComposite")}}
    • +
  • {{SVGElement("feConvolveMatrix")}}
    • +
  • {{SVGElement("feDiffuseLighting")}}
    • +
  • {{SVGElement("feDisplacementMap")}}
    • +
  • {{SVGElement("feFlood")}}
    • +
  • {{SVGElement("feGaussianBlur")}}
    • +
  • {{SVGElement("feImage")}}
    • +
  • {{SVGElement("feMerge")}}
    • +
  • {{SVGElement("feMorphology")}}
    • +
  • {{SVGElement("feOffset")}}
    • +
  • {{SVGElement("feSpecularLighting")}}
    • +
  • {{SVGElement("feTurbulence")}}
    • +
  • SVG tutorial: Filter effects
    • +
diff --git a/files/fr/web/svg/element/feturbulence/index.html b/files/fr/web/svg/element/feturbulence/index.html new file mode 100644 index 0000000000..f94488cbb4 --- /dev/null +++ b/files/fr/web/svg/element/feturbulence/index.html @@ -0,0 +1,113 @@ +--- +title: +slug: Web/SVG/Element/feTurbulence +tags: + - Element + - SVG + - SVG Filter +translation_of: Web/SVG/Element/feTurbulence +--- +
{{SVGRef}}
+ +

La primitive de filtre SVG <feTurbulence> crée une image en utilisant la fonction de turbulence de Perlin. Cela permet de créer des textures artificielles comme des nuages, du marbre, etc.

+ +

Contexte d'utilisation

+ +

{{svginfo}}

+ +

Attributs

+ +

Attributs globaux

+ + + +

Attributs spécifiques

+ +
    +
  • {{SVGAttr("baseFrequency")}}
    • +
  • {{SVGAttr("numOctaves")}}
    • +
  • {{SVGAttr("seed")}}
    • +
  • {{SVGAttr("stitchTiles")}}
    • +
  • {{SVGAttr("type")}}
    • +
+ +

Interface DOM

+ +

Cet élément implémente l'interface {{domxref("SVGFETurbulenceElement")}}.

+ +

Exemple

+ +
<svg width="200" height="200" viewBox="0 0 220 220"
+     xmlns="http://www.w3.org/2000/svg">
+  <filter id="displacementFilter">
+    <feTurbulence type="turbulence" baseFrequency="0.05"
+        numOctaves="2" result="turbulence"/>
+    <feDisplacementMap in2="turbulence" in="SourceGraphic"
+        scale="50" xChannelSelector="R" yChannelSelector="G"/>
+  </filter>
+
+  <circle cx="100" cy="100" r="100"
+      style="filter: url(#displacementFilter)"/>
+</svg>
+ +

{{EmbedLiveSample('Exemple', 220, 220)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Filters 1.0', '#feTurbulenceElement', '<feTurbulence>')}}{{Spec2('Filters 1.0')}}Aucun changement
{{SpecName('SVG1.1', 'filters.html#feTurbulenceElement', '<feTurbulence>')}}{{Spec2('SVG1.1')}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.elements.feTurbulence")}}

+ +

Voir aussi

+ +
    +
  • {{SVGElement("filter")}}
    • +
  • {{SVGElement("animate")}}
    • +
  • {{SVGElement("set")}}
    • +
  • {{SVGElement("feBlend")}}
    • +
  • {{SVGElement("feColorMatrix")}}
    • +
  • {{SVGElement("feComponentTransfer")}}
    • +
  • {{SVGElement("feComposite")}}
    • +
  • {{SVGElement("feConvolveMatrix")}}
    • +
  • {{SVGElement("feDiffuseLighting")}}
    • +
  • {{SVGElement("feDisplacementMap")}}
    • +
  • {{SVGElement("feFlood")}}
    • +
  • {{SVGElement("feGaussianBlur")}}
    • +
  • {{SVGElement("feImage")}}
    • +
  • {{SVGElement("feMerge")}}
    • +
  • {{SVGElement("feMorphology")}}
    • +
  • {{SVGElement("feOffset")}}
    • +
  • {{SVGElement("feSpecularLighting")}}
    • +
  • {{SVGElement("feTile")}}
    • +
  • Tutoriel SVG: Filtres
    • +
diff --git a/files/fr/web/svg/element/filter/index.html b/files/fr/web/svg/element/filter/index.html new file mode 100644 index 0000000000..1bc2cd02c5 --- /dev/null +++ b/files/fr/web/svg/element/filter/index.html @@ -0,0 +1,120 @@ +--- +title: +slug: Web/SVG/Element/filter +tags: + - Element + - SVG +translation_of: Web/SVG/Element/filter +--- +
{{SVGRef}}
+ +

L'élément SVG <filter> sert de conteneur pour définir des opérations de filtre. Il n'est jamais affiché par lui-même, il est référencé en utilisant l'attribut {{SVGAttr("filter")}} sur un élément SVG ou via la propriété  {{Glossary("CSS")}} {{cssxref("filter")}}.

+ +

Contexte d'utilisation

+ +

{{svginfo}}

+ +

Attributs

+ +

Attributs globaux

+ + + +

Attributs spécifiques

+ +
    +
  • {{SVGAttr("x")}}
    • +
  • {{SVGAttr("y")}}
    • +
  • {{SVGAttr("width")}}
    • +
  • {{SVGAttr("height")}}
    • +
  • {{SVGAttr("filterRes")}}
    • +
  • {{SVGAttr("filterUnits")}}
    • +
  • {{SVGAttr("primitiveUnits")}}
    • +
  • {{SVGAttr("xlink:href")}}
    • +
+ +

Interface DOM

+ +

Cet élément implémente l'interface {{domxref("SVGFilterElement")}}.

+ +

Exemple

+ +

SVG

+ +
<svg width="230" height="120"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+
+ <filter id="blurMe">
+  <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
+ </filter>
+
+ <circle cx="60"  cy="60" r="50" fill="green" />
+
+ <circle cx="170" cy="60" r="50" fill="green"
+          filter="url(#blurMe)" />
+</svg>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple",232,124,"/files/4227/feGaussianBlur.png")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("Filters 1.0", "#FilterElement", "<filter>")}}{{Spec2("Filters 1.0")}} 
{{SpecName("SVG1.1", "filters.html#FilterElement", "<filter>")}}{{Spec2("SVG1.1")}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.elements.filter")}}

+ +

Voir aussi

+ +
    +
  • {{SVGElement("feBlend")}}
    • +
  • {{SVGElement("feColorMatrix")}}
    • +
  • {{SVGElement("feComponentTransfer")}}
    • +
  • {{SVGElement("feComposite")}}
    • +
  • {{SVGElement("feConvolveMatrix")}}
    • +
  • {{SVGElement("feDiffuseLighting")}}
    • +
  • {{SVGElement("feDisplacementMap")}}
    • +
  • {{SVGElement("feDropShadow")}}
    • +
  • {{SVGElement("feFlood")}}
    • +
  • {{SVGElement("feGaussianBlur")}}
    • +
  • {{SVGElement("feImage")}}
    • +
  • {{SVGElement("feMerge")}}
    • +
  • {{SVGElement("feMorphology")}}
    • +
  • {{SVGElement("feOffset")}}
    • +
  • {{SVGElement("feSpecularLighting")}}
    • +
  • {{SVGElement("feTile")}}
    • +
  • {{SVGElement("feTurbulence")}}
    • +
  • Tutoriel SVG: Filtres
    • +
diff --git a/files/fr/web/svg/element/foreignobject/index.html b/files/fr/web/svg/element/foreignobject/index.html new file mode 100644 index 0000000000..c2f6e186ec --- /dev/null +++ b/files/fr/web/svg/element/foreignobject/index.html @@ -0,0 +1,121 @@ +--- +title: +slug: Web/SVG/Element/foreignObject +tags: + - Element + - Reference + - SVG +translation_of: Web/SVG/Element/foreignObject +--- +
{{SVGRef}}
+ +

L'élément <foreignObject> permet d'inclure des éléments d'un espace de noms XML différent à l'intérieur du SVG. Dans le contexte d'un navigateur, il s'agit généralement d'inclure du XHTML/HTML.

+ +
+ + +
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    polygon { fill: black }
+
+    div {
+      color: white;
+      font:18px serif;
+      height: 100%;
+      overflow: auto;
+    }
+  </style>
+
+  <polygon points="5,5 195,10 185,185 10,195" />
+
+  <!-- Cas d'utilisation courant: inclure du texte HTML dans le SVG -->
+  <foreignObject x="20" y="20" width="160" height="160">
+    <!--
+      Dans le cas d'un SVG intégré dans du HTML, le namespace XHTML peut
+      être omis, mais il est obligatoire dans le contexte d'un document SVG
+    -->
+    <div xmlns="http://www.w3.org/1999/xhtml">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      Sed mollis mollis mi ut ultricies. Nullam magna ipsum,
+      porta vel dui convallis, rutrum imperdiet eros. Aliquam
+      erat volutpat.
+    </div>
+  </foreignObject>
+</svg>
+ +

{{EmbedLiveSample('Exemple', 150, '100%')}}

+
+ +

Attributs

+ +
+
{{SVGAttr("height")}}
+
Cet attribut détermine la hauteur du rectangle.
+ Type de valeur: <length>|<percentage> ; Valeur par défaut: auto; Animation: oui
+
{{SVGAttr("width")}}
+
Cet attribut détermine la largeur du rectangle.
+ Type de valeur: <length>|<percentage> ; Valeur par défaut: auto; Animation: oui
+
{{SVGAttr("x")}}
+
Cet attribut détermine la coordonnée x du rectangle.
+ Type de valeur: <length>|<percentage> ; Valeur par défaut: 0; Animation: oui
+
{{SVGAttr("y")}}
+
Cet attribut détermine la coordonnée y du rectangle.
+ Type de valeur: <length>|<percentage> ; Valeur par défaut: 0; Animation: oui
+
+ +
+

Note: À partir de SVG2 x, y, width, et height sont des Propriétés Géometriques, ce qui signifie que ces attributs peuvent également être utilisés comme des propriétés CSS pour cet élément.

+
+ +

Attributs globaux

+ +
+
Attributs de base
+
Notamment: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
+
Attributs de style
+
{{SVGAttr('class')}}, {{SVGAttr('style')}}
+
Attributs de traitement conditionnel
+
Notamment: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
+
Attributs d'événement
+
Attributs d'événements globaux, Attributs d'événement graphiques, Attributs d'événement du document, Attributs d'événement des éléments du document
+
Attributs de présentation
+
Notamment: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
+
Attributs Aria
+
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
+
+ +

Notes d'usage

+ +

{{svginfo}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('SVG2', 'embedded.html#ForeignObjectElement', '<foreignObject>')}}{{Spec2('SVG2')}} 
{{SpecName('SVG1.1', 'extend.html#ForeignObjectElement', '<foreignObject>')}}{{Spec2('SVG1.1')}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.elements.foreignObject")}}

diff --git a/files/fr/web/svg/element/g/index.html b/files/fr/web/svg/element/g/index.html new file mode 100644 index 0000000000..1199b22468 --- /dev/null +++ b/files/fr/web/svg/element/g/index.html @@ -0,0 +1,86 @@ +--- +title: +slug: Web/SVG/Element/g +tags: + - Element + - Reference + - SVG + - SVG Conteneur +translation_of: Web/SVG/Element/g +--- +
{{SVGRef}}
+ +

L'élément g est un conteneur utilisé pour grouper des objets.

+ +

Les transformations appliquées à l'élément g sont reportées à tous ses éléments enfants. Les attributs appliqués sont également reportés aux éléments enfants. De plus, il peut être utilisé pour définir des objets complexes qui seront référencés ultérieurement avec l'élément {{SVGElement("use")}}.

+ +
+ + +
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <!-- Les enfants de g héritent de ses attributs de présentation -->
+  <g fill="white" stroke="green" stroke-width="5">
+    <circle cx="40" cy="40" r="25" />
+    <circle cx="60" cy="60" r="25" />
+  </g>
+</svg>
+
+ +

{{EmbedLiveSample('Exemple', 100, '100%')}}

+ +

Attributs

+ +

Cet élément n'a que des attributs globaux

+ +

Attributs globaux

+ +
+
Attributs de base
+
Notamment: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
+
Attributs de style
+
{{SVGAttr('class')}}, {{SVGAttr('style')}}
+
Attributs de traitement conditionnel
+
Notamment: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
+
Attributs d'événement
+
Attributs d'événement globaux, Attributs d'événement graphiques
+
Attributs de présentation
+
Notamment: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
+
Attributs Aria
+
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
+
+ +

Contexte d'utilisation

+ +

{{svginfo}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("SVG2", "struct.html#GElement", "<g>")}}{{Spec2("SVG2")}} 
{{SpecName("SVG1.1", "struct.html#Groups", "<g>")}}{{Spec2("SVG1.1")}}Initial definition
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.elements.g")}}

diff --git a/files/fr/web/svg/element/hkern/index.html b/files/fr/web/svg/element/hkern/index.html new file mode 100644 index 0000000000..60f8869c10 --- /dev/null +++ b/files/fr/web/svg/element/hkern/index.html @@ -0,0 +1,50 @@ +--- +title: +slug: Web/SVG/Element/hkern +tags: + - Element + - Police SVG + - Reference + - SVG +translation_of: Web/SVG/Element/hkern +--- +
{{SVGRef}}
+ +

La distance horizontale entre deux glyphes peut être ajustée minutieusement avec l'élément hkern. Ce proccessus est appelé Crénage.

+ +

Contexte d'utilisation

+ +

{{svginfo}}

+ +

Exemple

+ +

Attributs

+ +

Attributs globaux

+ + + +

Attributs spécifiques

+ +
    +
  • {{ SVGAttr("u1") }}
    • +
  • {{ SVGAttr("g1") }}
    • +
  • {{ SVGAttr("u2") }}
    • +
  • {{ SVGAttr("g2") }}
    • +
  • {{ SVGAttr("k") }}
    • +
+ +

Interface DOM

+ +

Cet élément implémente l'interface SVGHKernElement.

+ +

Voir également

+ + diff --git a/files/fr/web/svg/element/image/index.html b/files/fr/web/svg/element/image/index.html new file mode 100644 index 0000000000..3e9e1ff699 --- /dev/null +++ b/files/fr/web/svg/element/image/index.html @@ -0,0 +1,112 @@ +--- +title: +slug: Web/SVG/Element/image +translation_of: Web/SVG/Element/image +--- +
{{SVGRef}}
+ +

L'élément Image SVG (<image>) permet d'inclure une image matricielle dans un document SVG.

+ +

Contexte d'Utilisation

+ +

{{svginfo}}

+ +

Exemple

+ +

Rendu basique d'une image PNG dans un objet SVG :

+ +
<svg width="100%" height="100%" viewBox="0 0 100 100"
+     xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <image xlink:href="/files/2917/fxlogo.png" x="0" y="0" height="100" width="100" />
+</svg>
+
+ +

{{EmbedLiveSample("Exemple",250,260)}}

+ +

Attributs

+ +

Attributs globaux

+ + + +

Attributs spécifiques

+ +
    +
  • {{ SVGAttr("x") }}
    • +
  • {{ SVGAttr("y") }}
    • +
  • {{ SVGAttr("width") }}
    • +
  • {{ SVGAttr("height") }}
    • +
  • {{ SVGAttr("xlink:href") }}
    • +
  • {{ SVGAttr("preserveAspectRatio") }}
    • +
+ +

Interface DOM

+ +

Cet élément implémente l'interface SVGImageElement.

+ +

Compatibilité des navigateurs

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Accepté1.0{{ CompatGeckoDesktop('1.8') }}{{ CompatIE('9.0') }}{{ CompatOpera('8.0') }}{{ CompatSafari('3.0.4') }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Accepté{{ CompatAndroid('3.0') }}{{ CompatGeckoMobile('1.8') }}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatSafari('3.0.4') }}
+
+ +

Cette table s'appuit sur ces sources.

+ +

Notes spécifiques à Gecko

+ +

Avant Gecko 2.0 {{ geckoRelease("2.0") }} seule les images matricielles étaient acceptées.

diff --git a/files/fr/web/svg/element/index.html b/files/fr/web/svg/element/index.html new file mode 100644 index 0000000000..730456be9f --- /dev/null +++ b/files/fr/web/svg/element/index.html @@ -0,0 +1,295 @@ +--- +title: Element +slug: Web/SVG/Element +tags: + - Conception adaptative + - Elements + - Graphiques vectoriels + - Références SVG + - SVG + - dessin + - 'l10n:priority' +translation_of: Web/SVG/Element +--- +

« SVG / Référence des attributs SVG »

+ +

Les dessins et les images SVG sont créés à l'aide d'un large éventail d'éléments dédiés à la construction, au dessin et à la mise en page d'images vectorielles et de diagrammes. Vous trouverez ici la documentation de référence pour chacun des éléments SVG.

+ +

Éléments SVG de A à Z

+ +
+

A

+ +
    +
  • {{SVGElement("a")}}
    • +
  • {{SVGElement("animate")}}
    • +
  • {{SVGElement("animateMotion")}}
    • +
  • {{SVGElement("animateTransform")}}
    • +
+ +

C

+ +
    +
  • {{SVGElement("circle")}}
    • +
  • {{SVGElement("clipPath")}}
    • +
  • {{SVGElement("color-profile")}}
    • +
+ +

D

+ +
    +
  • {{SVGElement("defs")}}
    • +
  • {{SVGElement("desc")}}
    • +
  • {{SVGElement("discard")}}
    • +
+ +

E

+ +
    +
  • {{SVGElement("ellipse")}}
    • +
+ +

F

+ +
    +
  • {{SVGElement("feBlend")}}
    • +
  • {{SVGElement("feColorMatrix")}}
    • +
  • {{SVGElement("feComponentTransfer")}}
    • +
  • {{SVGElement("feComposite")}}
    • +
  • {{SVGElement("feConvolveMatrix")}}
    • +
  • {{SVGElement("feDiffuseLighting")}}
    • +
  • {{SVGElement("feDisplacementMap")}}
    • +
  • {{SVGElement("feDistantLight")}}
    • +
  • {{SVGElement("feDropShadow")}}
    • +
  • {{SVGElement("feFlood")}}
    • +
  • {{SVGElement("feFuncA")}}
    • +
  • {{SVGElement("feFuncB")}}
    • +
  • {{SVGElement("feFuncG")}}
    • +
  • {{SVGElement("feFuncR")}}
    • +
  • {{SVGElement("feGaussianBlur")}}
    • +
  • {{SVGElement("feImage")}}
    • +
  • {{SVGElement("feMerge")}}
    • +
  • {{SVGElement("feMergeNode")}}
    • +
  • {{SVGElement("feMorphology")}}
    • +
  • {{SVGElement("feOffset")}}
    • +
  • {{SVGElement("fePointLight")}}
    • +
  • {{SVGElement("feSpecularLighting")}}
    • +
  • {{SVGElement("feSpotLight")}}
    • +
  • {{SVGElement("feTile")}}
    • +
  • {{SVGElement("feTurbulence")}}
    • +
  • {{SVGElement("filter")}}
    • +
  • {{SVGElement("foreignObject")}}
    • +
+ +

G

+ +
    +
  • {{SVGElement("g")}}
    • +
+ +

H

+ +
    +
  • {{SVGElement("hatch")}}
    • +
  • {{SVGElement("hatchpath")}}
    • +
+ +

I

+ +
    +
  • {{SVGElement("image")}}
    • +
+ +

L

+ +
    +
  • {{SVGElement("line")}}
    • +
  • {{SVGElement("linearGradient")}}
    • +
+ +

M

+ +
    +
  • {{SVGElement("marker")}}
    • +
  • {{SVGElement("mask")}}
    • +
  • {{SVGElement("mesh")}}
    • +
  • {{SVGElement("meshgradient")}}
    • +
  • {{SVGElement("meshpatch")}}
    • +
  • {{SVGElement("meshrow")}}
    • +
  • {{SVGElement("metadata")}}
    • +
  • {{SVGElement("mpath")}}
    • +
+ +

P

+ +
    +
  • {{SVGElement("path")}}
    • +
  • {{SVGElement("pattern")}}
    • +
  • {{SVGElement("polygon")}}
    • +
  • {{SVGElement("polyline")}}
    • +
+ +

R

+ +
    +
  • {{SVGElement("radialGradient")}}
    • +
  • {{SVGElement("rect")}}
    • +
+ +

S

+ +
    +
  • {{SVGElement("script")}}
    • +
  • {{SVGElement("set")}}
    • +
  • {{SVGElement("solidcolor")}}
    • +
  • {{SVGElement("stop")}}
    • +
  • {{SVGElement("style")}}
    • +
  • {{SVGElement("svg")}}
    • +
  • {{SVGElement("switch")}}
    • +
  • {{SVGElement("symbol")}}
    • +
+ +

T

+ +
    +
  • {{SVGElement("text")}}
    • +
  • {{SVGElement("textPath")}}
    • +
  • {{SVGElement("title")}}
    • +
  • {{SVGElement("tspan")}}
    • +
+ +

U

+ +
    +
  • {{SVGElement("unknown")}}
    • +
  • {{SVGElement("use")}}
    • +
+ +

V

+ +
    +
  • {{SVGElement("view")}}
    • +
+
+ +

Les éléments SVG par catégories

+ +

Éléments d'animation

+ +

{{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, {{SVGElement("discard")}}, {{SVGElement("mpath")}}, {{SVGElement("set")}}

+ +

Formes simples

+ +

{{ SVGElement("circle") }}, {{ SVGElement("ellipse") }}, {{ SVGElement("line") }}, {{SVGElement("polygon") }}, {{ SVGElement("polyline") }}, {{ SVGElement("rect") }}

+ +

Éléments conteneurs

+ +

{{SVGElement("a")}}, {{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("missing-glyph")}}, {{SVGElement("pattern")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("unknown")}}

+ +

Éléments descriptifs

+ +

{{SVGElement("desc") }}, {{ SVGElement("metadata") }}, {{ SVGElement("title") }}

+ +

Éléments primitives de filtre

+ +

{{SVGElement("feBlend")}}, {{SVGElement("feColorMatrix")}}, {{SVGElement("feComponentTransfer")}}, {{SVGElement("feComposite")}}, {{SVGElement("feConvolveMatrix")}}, {{SVGElement("feDiffuseLighting")}}, {{SVGElement("feDisplacementMap")}}, {{SVGElement("feDropShadow")}}, {{SVGElement("feFlood")}},{{SVGElement("feFuncA")}}, {{SVGElement("feFuncB")}}, {{SVGElement("feFuncG")}}, {{SVGElement("feFuncR")}},{{SVGElement("feGaussianBlur")}}, {{SVGElement("feImage")}}, {{SVGElement("feMerge")}}, {{SVGElement("feMergeNode")}}, {{SVGElement("feMorphology")}}, {{SVGElement("feOffset")}}, {{SVGElement("feSpecularLighting")}}, {{SVGElement("feTile")}}, {{SVGElement("feTurbulence")}}

+ +

Éléments pour polices de caractères

+ +

{{SVGElement("font")}}, {{SVGElement("font-face")}}, {{SVGElement("font-face-format")}}, {{SVGElement("font-face-name")}}, {{SVGElement("font-face-src")}}, {{SVGElement("font-face-uri")}}, {{SVGElement("hkern")}}, {{SVGElement("vkern")}}

+ +

Éléments de dégradés

+ +

{{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("radialGradient")}}, {{SVGElement("stop")}}

+ +

Éléments graphiques

+ +

{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("text")}}, {{SVGElement("use")}}

+ +

Éléments de référencement graphique

+ +

{{SVGElement("mesh")}}, {{SVGElement("use")}}

+ +

Éléments de source de lumière

+ +

{{ SVGElement("feDistantLight") }}, {{ SVGElement("fePointLight") }}, {{ SVGElement("feSpotLight") }}

+ +

Éléments sans‑rendu

+ +

{{SVGElement("clipPath")}}, {{SVGElement("defs")}}, {{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("meshgradient")}}, {{SVGElement("metadata")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("symbol")}}, {{SVGElement("title")}}

+ +

Éléments de service pour peinture

+ +

{{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("solidcolor")}}

+ +

Éléments avec rendu

+ +

{{SVGElement("a")}}, {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("foreignObject")}}, {{SVGElement("g")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("text")}}, {{SVGElement("textPath")}}, {{SVGElement("tspan")}}, {{SVGElement("unknown")}}, {{SVGElement("use")}}

+ +

Éléments de formes

+ +

{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}

+ +

Éléments structurels

+ +

{{ SVGElement("defs") }}, {{ SVGElement("g") }}, {{ SVGElement("svg") }}, {{SVGElement("symbol") }}, {{ SVGElement("use") }}

+ +

Éléments de contenu textuel

+ +

{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}, {{SVGElement("textPath")}}, {{SVGElement("text")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}

+ +

Éléments de contenu textuel enfant

+ +

{{ SVGElement("altGlyph") }}, {{ SVGElement("textPath") }}, {{ SVGElement("tref") }}, {{SVGElement("tspan") }}

+ +

Éléments non catégorisés

+ +

{{SVGElement("clipPath")}}, {{SVGElement("color-profile")}}, {{SVGElement("cursor")}}, {{SVGElement("filter")}}, {{SVGElement("foreignObject")}}, {{SVGElement("hatchpath")}}, {{SVGElement("meshpatch")}}, {{SVGElement("meshrow")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("view")}}

+ +

Élements obsolètes et dépréciés

+ +
+

Les éléments ci-dessous sont dépréciés et ne doivent pas être utilisés. Vous ne devez absolument pas les utiliser dans des nouveux projets, et vous devez dans la mesure du possible les remplacer dans les vieux projets. Ils sont listés là uniquemnt à titre informatif.

+
+ +

A

+ +

{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("animateColor")}}

+ +

C

+ +

{{SVGElement("cursor")}}

+ +

F

+ +

{{SVGElement("font")}}, {{SVGElement("font-face")}}, {{SVGElement("font-face-format")}}, {{SVGElement("font-face-name")}}, {{SVGElement("font-face-src")}}, {{SVGElement("font-face-uri")}}

+ +

G

+ +

{{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}

+ +

H

+ +

{{SVGElement("hkern")}}

+ +

M

+ +

{{SVGElement("missing-glyph")}}

+ +

T

+ +

{{SVGElement("tref")}}

+ +

V

+ +

{{SVGElement("vkern")}}

+ +

Voir aussi

+ + + +

{{SVGRef}}

diff --git a/files/fr/web/svg/element/line/index.html b/files/fr/web/svg/element/line/index.html new file mode 100644 index 0000000000..851e87030b --- /dev/null +++ b/files/fr/web/svg/element/line/index.html @@ -0,0 +1,118 @@ +--- +title: +slug: Web/SVG/Element/line +tags: + - Element + - Graphisme + - Reference + - Référence(2) + - SVG + - Élément(2) +translation_of: Web/SVG/Element/line +--- +
{{SVGRef}}
+ +

L'élément line est un élément de la catégorie des formes simples SVG, utilisé pour créer une ligne connectant deux points.

+ +

Contexte d'utilisation

+ +

{{svginfo}}

+ +

Exemple

+ +

» line.svg

+ +

Vous pouvez aussi appliquer une transformation pour avoir le même résultat. En commençant avec une ligne normale,

+ +

» line1.svg

+ +

ajoutez des options de transformation pour changer la direction de la ligne :

+ +

» line2.svg

+ +

Attributs

+ +

Attributs globaux

+ + + +

Attributs spécifiques

+ +
    +
  • {{ SVGAttr("x1") }}
    • +
  • {{ SVGAttr("x2") }}
    • +
  • {{ SVGAttr("y1") }}
    • +
  • {{ SVGAttr("y2") }}
    • +
+ +

Interface DOM

+ +

Cet élément implémente l'interface SVGLineElement.

+ +

Compatibilité des navigateurs

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeFirefox (Gecko)IEOperaSafari
Support basique1.0{{ CompatGeckoDesktop('1.8') }}{{ CompatIE('9.0') }}{{ CompatOpera('8.0') }}{{ CompatSafari('3.0.4') }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Support basique{{ CompatAndroid('3.0') }}{{ CompatGeckoMobile('1.8') }}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatSafari('3.0.4') }}
+
+ +

Cette table est basée sur ces ressources.

+ +

Élément connexes

+ +
    +
  • {{ SVGElement("polygon") }} ;
    • +
  • {{ SVGElement("path") }}.
    • +
diff --git a/files/fr/web/svg/element/lineargradient/index.html b/files/fr/web/svg/element/lineargradient/index.html new file mode 100644 index 0000000000..360947e8e9 --- /dev/null +++ b/files/fr/web/svg/element/lineargradient/index.html @@ -0,0 +1,100 @@ +--- +title: +slug: Web/SVG/Element/linearGradient +tags: + - Element + - Reference + - SVG + - SVG Gradient +translation_of: Web/SVG/Element/linearGradient +--- +
{{SVGRef}}
+ +

L'élément <linearGradient> permet de définir des dégradés linéaires, qui pourront être utilisés comme remplissage ou contour des éléments SVG.

+ +

Contexte d'utilisation

+ +

{{svginfo}}

+ +

Attributs

+ +

Attributs globaux

+ + + +

Attributs spécifiques

+ +
    +
  • {{SVGAttr("gradientUnits")}}
    • +
  • {{SVGAttr("gradientTransform")}}
    • +
  • {{SVGAttr("x1")}}
    • +
  • {{SVGAttr("y1")}}
    • +
  • {{SVGAttr("x2")}}
    • +
  • {{SVGAttr("y2")}}
    • +
  • {{SVGAttr("spreadMethod")}}
    • +
  • {{SVGAttr("xlink:href")}}
    • +
+ +

Interface DOM

+ +

Cet élément implémente l'interface {{domxref("SVGLinearGradientElement")}}.

+ +

Exemple

+ +
<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <linearGradient id="MyGradient">
+            <stop offset="5%"  stop-color="green"/>
+            <stop offset="95%" stop-color="gold"/>
+        </linearGradient>
+    </defs>
+
+    <rect fill="url(#MyGradient)"
+          x="10" y="10" width="100" height="100"/>
+</svg>
+ +

{{EmbedLiveSample("Exemple", 120, 120, "https://mdn.mozillademos.org/files/10061/svg-lineargradient.png")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('SVG2', 'pservers.html#LinearGradientElement', '<linearGradient>')}}{{Spec2('SVG2')}} 
{{SpecName('SVG1.1', 'pservers.html#LinearGradients', '<linearGradient>')}}{{Spec2('SVG1.1')}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.elements.linearGradient")}}

+ +

Voir aussi

+ +
    +
  • {{SVGElement("radialGradient")}}
    • +
  • {{SVGElement("stop")}}
    • +
diff --git a/files/fr/web/svg/element/marker/index.html b/files/fr/web/svg/element/marker/index.html new file mode 100644 index 0000000000..25c1cfeed0 --- /dev/null +++ b/files/fr/web/svg/element/marker/index.html @@ -0,0 +1,135 @@ +--- +title: +slug: Web/SVG/Element/marker +tags: + - SVG + - SVG Element +translation_of: Web/SVG/Element/marker +--- +
{{SVGRef}}
+ +

L'élément <marker> définit un élément graphique qui pourra être utilisé pour dessiner des pointes de flèches ou des polymarqueurs sur un élément {{SVGElement("path")}}, {{SVGElement("line")}}, {{SVGElement("polyline")}} ou {{SVGElement("polygon")}}.

+ +

Les marqueurs sont attachés aux formes à l'aide des propriétés {{SVGAttr("marker-start")}}, {{SVGAttr("marker-mid")}}, et {{SVGAttr("marker-end")}}.

+ +
+ + +
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <!-- Définit une pointe de flèche -->
+    <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5"
+        markerWidth="6" markerHeight="6"
+        orient="auto-start-reverse">
+      <path d="M 0 0 L 10 5 L 0 10 z" />
+    </marker>
+
+    <!-- Définit un simple point -->
+    <marker id="dot" viewBox="0 0 10 10" refX="5" refY="5"
+        markerWidth="5" markerHeight="5">
+      <circle cx="5" cy="5" r="5" fill="red" />
+    </marker>
+  </defs>
+
+  <!-- Dessine les axes des coordonnées avec des pointes de flèche à chaque bout -->
+  <polyline points="10,10 10,90 90,90" fill="none" stroke="black"
+   marker-start="url(#arrow)" marker-end="url(#arrow)"  />
+
+  <!-- Dessine une ligne avec un simple point entre chaque segment -->
+  <polyline points="15,80 29,50 43,60 57,30 71,40 85,15" fill="none" stroke="grey"
+   marker-start="url(#dot)" marker-mid="url(#dot)"  marker-end="url(#dot)" />
+</svg>
+ +

{{EmbedLiveSample('Exemple', 200, 200)}}

+
+ +

Attributs

+ +
+
{{SVGAttr("markerHeight")}}
+
Définit la hauteur du viewport du marqueur.
+ Valeur: <length> ; Valeur par défaut: 3; Animation: oui
+
{{SVGAttr("markerUnits")}}
+
Définit le système de coordnnées pour les attributs markerWidth, markerHeight et le contenu du <marker>.
+ Valeur: userSpaceOnUse|strokeWidth ; Valeur par défaut: strokeWidth; Animation: oui
+
{{SVGAttr("markerWidth")}}
+
Définit la largeur du viewport du marqueur.
+ Valeur: <length> ; Valeur par défaut: 3; Animation: oui
+
{{SVGAttr("orient")}}
+
Définit l'orientation du marqueur relativement à la forme à laquelle il est attaché.
+ Valeur: auto|auto-start-reverse|<angle> ; Valeur par défaut: 0; Animation: oui
+
{{SVGAttr("preserveAspectRatio")}}
+
Définit comment le fragment svg doit être déformé s'il est incorporé dans un conteneur avec un rapport hauteur:largeur différent de celui du marqueur.
+ Valeur: (none| xMinYMin| xMidYMin| xMaxYMin| xMinYMid| xMidYMid| xMaxYMid| xMinYMax| xMidYMax| xMaxYMax) (meet|slice)? ; Valeur par défaut: xMidYMid meet; Animation: oui
+
{{SVGAttr("refX")}}
+
Définit la coordonnées x du point de référence du marqueur.
+ Valeur: left|center|right|<coordinate> ; Valeur par défaut: 0; Animation: oui
+
{{SVGAttr("refY")}}
+
Définit la coordonnées y du point de référence du marqueur.
+ Valeur: top|center|bottom|<coordinate> ; Valeur par défaut: 0; Animation: oui
+
{{SVGAttr("viewBox")}}
+
Définit la limite de la zone de dessin pour le fragment SVG.
+ Valeur: <list-of-numbers> ; Valeur par défaut: none; Animation: oui
+
+ +

Attributs globaux

+ +
+
Attributs de base
+
Notamment: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
+
Attributs de style
+
{{SVGAttr('class')}}, {{SVGAttr('style')}}
+
Attributs de traitement conditionnel
+
Notamment: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
+
Attributs de présentation
+
Notamment: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
+
Attributs ARIA
+
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
+
+ +

Notes d'usage

+ +

{{svginfo}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Sp"cificationStatutCommentaire
{{SpecName("SVG Markers", "#MarkerElement", "<marker>")}}{{Spec2("SVG Markers")}} 
{{SpecName("SVG2", "painting.html#MarkerElement", "<marker>")}}{{Spec2("SVG2")}} 
{{SpecName("SVG1.1", "painting.html#MarkerElement", "<marker>")}}{{Spec2("SVG1.1")}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.elements.marker")}}

+ +

Voir aussi

+ +
    +
  • Propriétés liées aux marqueurs: {{SVGAttr("marker-start")}}, {{SVGAttr("marker-mid")}}, et {{SVGAttr("marker-end")}}
    • +
diff --git a/files/fr/web/svg/element/mask/index.html b/files/fr/web/svg/element/mask/index.html new file mode 100644 index 0000000000..4d313277fa --- /dev/null +++ b/files/fr/web/svg/element/mask/index.html @@ -0,0 +1,116 @@ +--- +title: +slug: Web/SVG/Element/mask +tags: + - Element + - Masque + - NeedsCompatTable + - SVG + - SVG Container +translation_of: Web/SVG/Element/mask +--- +
{{SVGRef}}
+ +

L'élément <mask> définit un masque alpha. Ce masque peut par la suite être appliqué sur une forme en utilisant la propriété {{SVGAttr("mask")}}.

+ +

Le masque permet de rendre des zones de l'élément sur lequel est appliqué (semi-)transparentes. On peut par exemple créer un effet de fondu en utilisant un dégradé, ce que le détourage ({{SVGElement('clipPath')}}) ne permet pas.

+ +
+ + +
<svg viewBox="-10 -10 120 120">
+  <mask id="myMask">
+    <!-- Tous les pixels blancs sont visibles -->
+    <rect x="0" y="0" width="100" height="100" fill="white" />
+
+    <!-- Tous les pixels noirs sont invisibles -->
+    <path d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z" fill="black" />
+  </mask>
+
+  <polygon points="-10,110 110,110 110,-10" fill="orange" />
+
+  <!-- Avec ce masque, on "perfore" un trou en forme de coeur à l'intérieur du cercle -->
+  <circle cx="50" cy="50" r="50" mask="url(#myMask)" />
+</svg>
+ +

{{EmbedLiveSample('Example', 100, 100)}}

+
+ +

Attributs

+ +
+
{{SVGAttr("height")}}
+
Définit la hauteur du masque.
+ Valeur: <length> ; Valeur par défaut: 120%; Animation: oui
+
{{SVGAttr("maskContentUnits")}}
+
Définit le système de coordonnées pour le contenu du <mask>.
+ Valeur: userSpaceOnUse|objectBoundingBox ; Valeur par défaut: userSpaceOnUse; Animation: oui
+
{{SVGAttr("maskUnits")}}
+
Définit le système de coordonnées pour les attributs {{SVGAttr("x")}}, {{SVGAttr("y")}}, {{SVGAttr("width")}} et {{SVGAttr("height")}} du <mask>.
+ Valeur: userSpaceOnUse|objectBoundingBox ; Valeur par défaut: objectBoundingBox; Animation: oui
+
{{SVGAttr("x")}}
+
Définit la coordonnée de l'axe x du coin supérieur gauche du masque.
+ Valeur: <coordinate> ; Valeur par défaut: -10%; Animation: oui
+
{{SVGAttr("y")}}
+
Définit la coordonnée de l'axe y du coin supérieur gauche du masque.
+ Valeur: <coordinate> ; Valeur par défaut: -10%; Animation: oui
+
{{SVGAttr("width")}}
+
Définit la largeur du masque.
+ Valeur: <length> ; Valeur par défaut: 120%; Animation: oui
+
+ +

Attributs globaux

+ +
+
Attributs de base
+
Notamment: {{SVGAttr('id')}}
+
Attributs de style
+
{{SVGAttr('class')}}, {{SVGAttr('style')}}
+
Attributs de traitement conditionnel
+
Notamment: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
+
Attributs de présentation
+
Notamment: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
+
+ +

Notes d'usage

+ +

{{svginfo}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('CSS Masks', '#MaskElement', '<mask>')}}{{Spec2('CSS Masks')}} 
{{SpecName('SVG1.1', 'masking.html#Masking', '<mask>')}}{{Spec2('SVG1.1')}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.elements.mask")}}

+ +

Voir aussi

+ +
    +
  • Élément de détourage: {{SVGElement("clipPath")}}
    • +
  • Propriétés CSS de masque: {{cssxref("mask")}}, {{cssxref("mask-image")}},{{cssxref("mask-mode")}}, {{cssxref("mask-repeat")}}, {{cssxref("mask-position")}}, {{cssxref("mask-clip")}}, {{cssxref("mask-origin")}}, {{cssxref("mask-composite")}}, {{cssxref("mask-size")}}, {{cssxref("pointer-events")}}
    • +
diff --git a/files/fr/web/svg/element/metadata/index.html b/files/fr/web/svg/element/metadata/index.html new file mode 100644 index 0000000000..faadcaaa64 --- /dev/null +++ b/files/fr/web/svg/element/metadata/index.html @@ -0,0 +1,63 @@ +--- +title: +slug: Web/SVG/Element/metadata +tags: + - Element + - SVG + - SVG Description +translation_of: Web/SVG/Element/metadata +--- +
{{SVGRef}}
+ +

L'élément SVG <metadata> permet d'ajouter des metadonnées au contenu SVG. Des metadonnées sont des données structurées qui donnent des informations sur le contenu du document. La balise <metadata> doit contenir des éléments d'un autre {{Glossary("namespace", "namespaces")}} {{Glossary("XML")}} tel que {{Glossary("RDF")}}, FOAF, etc.

+ +

Contexte d'utilisation

+ +

{{svginfo}}

+ +

Attributs

+ +

Attributs globaux

+ + + +

Attributs spécifiques

+ +

Aucun

+ +

Interface DOM

+ +

Cet élément implémente l'interface {{domxref("SVGMetadataElement")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('SVG2', 'struct.html#MetadataElement', '<metadata>')}}{{Spec2('SVG2')}}Autorise les attributs d'événements globaux sur l'élément.
{{SpecName('SVG1.1', 'metadata.html#MetadataElement', '<metadata>')}}{{Spec2('SVG1.1')}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.elements.metadata")}}

diff --git a/files/fr/web/svg/element/mpath/index.html b/files/fr/web/svg/element/mpath/index.html new file mode 100644 index 0000000000..5d5d322dc9 --- /dev/null +++ b/files/fr/web/svg/element/mpath/index.html @@ -0,0 +1,108 @@ +--- +title: +slug: Web/SVG/Element/mpath +tags: + - Element + - SVG + - SVG Animation +translation_of: Web/SVG/Element/mpath +--- +
{{SVGRef}}
+ +

L'élément <mpath> se place dans un élément {{SVGElement("animateMotion")}}, il permet de référencer un élément {{SVGElement("path")}} pour définir le chemin utilisé par l'animation.

+ +

Contexte d'utilisation

+ +

{{svginfo}}

+ +

Attributs

+ +

Attributs globaux

+ + + +

Attributs spécifiques

+ +
    +
  • {{SVGAttr("xlink:href")}}
    • +
+ +

Interface DOM

+ +

Cet élément implémente l'interface {{domxref("SVGMPathElement")}}.

+ +

Exemple

+ +

SVG

+ +
<svg width="100%" height="100%"  viewBox="0 0 500 300"
+     xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink" >
+
+  <rect x="1" y="1" width="498" height="298"
+        fill="none" stroke="blue" stroke-width="2" />
+
+  <!-- Affiche le chemin en bleu avec trois cercles
+       au début, au milieu et à la fin du chemin -->
+  <path id="path1" d="M100,250 C 100,50 400,50 400,250"
+        fill="none" stroke="blue" stroke-width="7.06"  />
+  <circle cx="100" cy="250" r="17.64" fill="blue"  />
+  <circle cx="250" cy="100" r="17.64" fill="blue"  />
+  <circle cx="400" cy="250" r="17.64" fill="blue"  />
+
+  <!-- Triangle qui sera déplacé le long du chemin.
+       Il est définit avec une orientation verticale, la base du triangle
+       est centrée horizontalement juste au-dessus de l'origine. -->
+  <path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"
+        fill="yellow" stroke="red" stroke-width="7.06"  >
+    <!-- Référence le path à utiliser -->
+    <animateMotion dur="6s" repeatCount="indefinite" rotate="auto" >
+       <mpath xlink:href="#path1"/>
+    </animateMotion>
+  </path>
+</svg>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple", 250, 165)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("SVG Animations 2", "#MPathElement", "<mpath>")}}{{Spec2("SVG Animations 2")}}Aucun changement
{{SpecName("SVG1.1", "animate.html#MPathElement", "<mpath>")}}{{Spec2("SVG1.1")}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.elements.mpath")}}

+ +

Voir aussi

+ +
    +
  • {{SVGElement("animateMotion")}}
    • +
diff --git a/files/fr/web/svg/element/path/index.html b/files/fr/web/svg/element/path/index.html new file mode 100644 index 0000000000..c2ecfd5096 --- /dev/null +++ b/files/fr/web/svg/element/path/index.html @@ -0,0 +1,69 @@ +--- +title: +slug: Web/SVG/Element/path +tags: + - SVG +translation_of: Web/SVG/Element/path +--- +
{{SVGRef}}
+ +

L'élément path est l'élément générique pour définir une forme. Toutes les formes basiques peuvent aussi être faites à partir de path.

+ +

Usage

+ +

{{svginfo}}

+ +

Exemple

+ +
<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 400 400"
+     xmlns="http://www.w3.org/2000/svg" version="1.1">
+
+  <path d="M 100 100 L 300 100 L 200 300 z"
+        fill="red" stroke-width="3" />
+</svg>
+
+ +

Attributs

+ +

Attributs Globaux

+ + + +

Attributs spécifiques

+ +
    +
  • {{ SVGAttr("d") }}
    • +
  • {{ SVGAttr("pathLength") }}
    • +
+ +

Interface DOM

+ +

Cet élément implémente l'interface SVGPathElement.

+ +

Compatibilité des navigateurs

+ +

{{Compat("svg.elements.path")}}

+ +

Voir également

+ + diff --git a/files/fr/web/svg/element/pattern/index.html b/files/fr/web/svg/element/pattern/index.html new file mode 100644 index 0000000000..ba728e5c0e --- /dev/null +++ b/files/fr/web/svg/element/pattern/index.html @@ -0,0 +1,166 @@ +--- +title: +slug: Web/SVG/Element/pattern +tags: + - Conteneur SVG + - Eléments(2) + - SVG +translation_of: Web/SVG/Element/pattern +--- +
{{SVGRef}}
+ +

L'élément <pattern> définit un objet graphique qui peut être redessiné à des intervalles de coordonnées x et y répétés ("en mosaïque") pour couvrir une surface.

+ +

Le <pattern> est référéne par les attributs {{SVGAttr("fill")}} et {{SVGAttr("stroke")}} sur les autres éléments graphiques, pour appliquer un remplissage ou une bordure sur ces éléments avec le motif référencé.

+ +
html, body, svg { height: 100% }
+
+ +
<svg viewBox="0 0 230 100" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <pattern id="star" viewBox="0,0,10,10" width="10%" height="10%">
+      <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"/>
+    </pattern>
+  </defs>
+
+  <circle cx="50"  cy="50" r="50" fill="url(#star)"/>
+  <circle cx="180" cy="50" r="40" fill="none" stroke-width="20" stroke="url(#star)"/>
+</svg>
+ +

{{EmbedLiveSample('Exemple', 150, '100%')}}

+ +

Attributs

+ +
+
{{SVGAttr("height")}}
+
Cet attribut détermine la hauteur du motif de mosaïque.
+ Type de valeur : <longueur>|<pourcentage>; Valeur par défaut : 0; Animable : oui
+
{{SVGAttr("href")}}
+
Cet attribut référence un patron de motif qui fournit les valeurs par défaut des attributs de l'élément <pattern>.
+ Type de valeur: <URL>; Valeur par défaut : none; Animable: yes
+
{{SVGAttr("patternContentUnits")}}
+
Cet attribut définit le système de coordonnées pour le contenu de {{SVGElement("pattern")}}.
+ Type de valeur : userSpaceOnUse|objectBoundingBox; Valeur par défaut : userSpaceOnUse; Animable: yes +

Note : Cet attribut n'a pas d'effet si l'attribut viewBox est définit sur l'élément <pattern>.

+
+
{{SVGAttr("patternTransform")}}
+
Cet attribut contient la définition d'une transformation optionnelle supplémentaire du système de coordonnées du motif vers celui de la cible.
+ Type de valeur : <transform-list>; Valeur par défaut : none; Animatable: yes
+
{{SVGAttr("patternUnits")}}
+
Cet attribut définit le système de coordonnées pour les attributs x, y, width , et height.
+ Type de valeur : userSpaceOnUse|objectBoundingBox; Valeur par défaut : objectBoundingBox; Animable: yes
+
{{SVGAttr("preserveAspectRatio")}}
+
Cet attribut définit comme le fragment SVG doit être déformé s'il est embarqué dans un conteneur avec un ratio d'aspect différent.
+ Type de valeur : (none| xMinYMin| xMidYMin| xMaxYMin| xMinYMid| xMidYMid| xMaxYMid| xMinYMax| xMidYMax| xMaxYMax) (meet|slice)? ; Valeur par défaut : xMidYMid meet; Animable: yes
+
{{SVGAttr("viewBox")}}
+
Cet attribut définit les limites de la fenêtre de rendu du SVG pour le fragment du motif.
+ Type de valeur : <list-of-numbers> ; Valeur par défaut : none; Animable: yes
+
{{SVGAttr("width")}}
+
Cet attribut détermine la largeur du motif de mosaïque.
+ Type de valeur : <length>|<percentage> ; Valeur par défaut : 0; Animable: yes
+
{{SVGAttr("x")}}
+
Cet attribut détermine le déplacement en coordonnée x du motif de mosaïque.
+ Type de valeur : <length>|<percentage> ; Valeur par défaut : 0; Animatable: yes
+
{{SVGAttr("xlink:href")}} {{deprecated_inline("SVG2")}}
+
Cet attribut référence un patron de motif qui fournit des valeurs par défaut pour les attributs du <pattern>.
+ Type de valeur : <URL>; Valeur par défaut : none; Animable: yes +

Note : Pour les navigateurs implémentant href, si à la fois href et xlink:href sont définis, xlink:href sera ignoré et seulement href sera utilisé.

+
+
{{SVGAttr("y")}}
+
Cet attribut détermine le déplacement en coordonnée y du motif de mosaïque.
+ Type de valeur : <length>|<percentage> ; Valeur par défaut : 0; Animable: yes
+
+

Global attributes

+ Attributs principaux
+
Plus notamment : {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
+
Attributs de style
+
{{SVGAttr('class')}}, {{SVGAttr('style')}}
+
Attributs de traitement conditionnel
+
Plus notamment : {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
+
Attributs de présentation
+
Plus notamment : {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
+
Attributs XLink
+
Plus notamment : {{SVGAttr("xlink:title")}}
+
+ +

Contexte d'utilisation

+ +

{{svginfo}}

+ +

Interface DOM 

+ +

Cet élement implémente l'interface SVGPatternElement.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatusCommentaire
{{SpecName('SVG2', 'pservers.html#Patterns', '<pattern>')}}{{Spec2('SVG2')}}
{{SpecName('SVG1.1', 'pservers.html#Patterns', '<pattern>')}}{{Spec2('SVG1.1')}}Initial definition
+ +

Compatibilité des navigateurs

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FonctionChromeFirefox (Gecko)Internet ExplorerOperaSafari
Support simple{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FonctionAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Support simple{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/fr/web/svg/element/polygon/index.html b/files/fr/web/svg/element/polygon/index.html new file mode 100644 index 0000000000..ac9c3fbb62 --- /dev/null +++ b/files/fr/web/svg/element/polygon/index.html @@ -0,0 +1,102 @@ +--- +title: +slug: Web/SVG/Element/polygon +tags: + - Element + - Reference + - SVG + - SVG Graphique +translation_of: Web/SVG/Element/polygon +--- +
{{SVGRef}}
+ +

L'élément <polygon>  délimite une forme close composée d'un groupe de plusieurs segments de droites. Le dernier point est relié au premier afin de fermer la forme et de relier les traits entre deux. Pour créer une forme ouverte, voir l'élément {{SVGElement("polyline")}}.

+ +
+ + +
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
+  <!-- Exemple d'un polygone avec le remplissage par défaut -->
+  <polygon points="0,100 50,25 50,75 100,0" />
+
+  <!-- Le même polygone sans remplissage et avec un contour -->
+  <polygon points="100,100 150,25 150,75 200,0"
+            fill="none" stroke="black" />
+</svg>
+ +

{{ EmbedLiveSample('SVG', '120', '120', '', 'Web/SVG/Element/polygon') }}

+
+ +

Attributs

+ +
+
{{SVGAttr('points')}}
+
Cette attribut défini une liste de point (paire de coordonnées absolue x et y ) nécessaire pour dessiner le polygone.
+ Type de valeur: <number>+ ; Valeur par défaut: ""; Peut être animé: oui
+
{{SVGAttr("pathLength")}}
+
Cet attribut spécifie la taille totale pour le chemin dans l'unité de l'utilisateur.
+ Type de valeur: <number>; Valeur par défaut: aucune; Peut être animé: oui
+
+ +

Attributs Globaux

+ +
+
Attribut de base
+
Principalement: {{SVGAttr('id')}} et {{SVGAttr('tabindex')}}
+
Attribut de style
+
{{SVGAttr('class')}} et {{SVGAttr('style')}}
+
Attributs conditionnels
+
Principalement: {{SVGAttr('requiredExtensions')}} et {{SVGAttr('systemLanguage')}}
+
Attributs d'évènements
+
Attribut d'évènement global, Attribut d'évènement graphique
+
Attributs de présentation
+
Principalement: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}} et {{SVGAttr('visibility')}}
+
Attributs ARIA
+
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
+
+ +

Contexte d'usage

+ +

{{svginfo}}

+ +

Interface DOM

+ +

Cet élément implémente l'interface {{domxref("SVGPolygonElement")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaire
{{SpecName('SVG2', 'shapes.html#PolygonElement', '<polygon>')}}{{Spec2('SVG2')}}Pas de changement
{{SpecName('SVG1.1', 'shapes.html#PolygonElement', '<polygon>')}}{{Spec2('SVG1.1')}}Définition initiale.
+ +

Compatibilité avec les navigateurs

+ + + +

{{Compat("svg.elements.polygon")}}

+ +

Voir également

+ +
    +
  • Autres formes élémentaires en SVG: {{ SVGElement('circle') }}, {{ SVGElement('ellipse') }}, {{ SVGElement('line') }}, {{ SVGElement('polyline') }} et {{ SVGElement('rect') }}.
    • +
diff --git a/files/fr/web/svg/element/polyline/index.html b/files/fr/web/svg/element/polyline/index.html new file mode 100644 index 0000000000..e692ae8c7f --- /dev/null +++ b/files/fr/web/svg/element/polyline/index.html @@ -0,0 +1,179 @@ +--- +title: +slug: Web/SVG/Element/polyline +tags: + - Element + - Graphisme + - Reference + - SVG +translation_of: Web/SVG/Element/polyline +--- +
{{SVGRef}}
+ +

L'élément SVG <polyline> est une forme SVG basique qui crée des lignes entre plusieurs points. Un élément polyline est généralement utilisé pour créer des tracés ouverts car le dernier point n'est pas nécessairement connecté avec le premier. Lorsqu'on désire réaliser des formes fermées, on privilégiera l'élément {{SVGElement("polygon")}}.

+ +

Contexte d'utilisation

+ +

{{svginfo}}

+ +

Attributs

+ +

Attributs universels

+ + + +

Attributs spécifiques

+ +
    +
  • {{SVGAttr("points")}}
    • +
+ +

Interface DOM

+ +

Cet élément implémente l'interface {{domxref("SVGPolylineElement")}}.

+ +

Exemples

+ +

Utilisation basique

+ +

SVG

+ +
<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
+  <polyline fill="none" stroke="black"
+      points="20,100 40,60 70,80 100,20"/>
+</svg>
+ +

Résultat

+ +

{{EmbedLiveSample("Utilisation_basique", 120, 120)}}

+ +

Escaliers

+ +

HTML

+ +
<div class="contain-demo">
+  <svg width="150" height="200">
+    <desc>
+      Première polyligne orange avec
+      remplissage blanc.
+    </desc>
+    <polyline
+        points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
+        fill="white" stroke="#D07735" stroke-width="6" />
+  </svg>
+  <svg width="150" height="200">
+    <desc>
+      Seconde polyligne orange avec
+      remplissage jaune.
+    </desc>
+    <polyline
+        points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
+        fill="#F9F38C" stroke="#D07735" stroke-width="6" />
+  </svg>
+</div>
+
+ +

CSS

+ +
.contain-demo {
+  margin: 25px auto;
+  text-align: center;
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Escaliers", 400, 500)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('SVG2', 'shapes.html#PolylineElement', '<polyline>')}}{{Spec2('SVG2')}} 
{{SpecName('SVG1.1', 'shapes.html#PolylineElement', '<polyline>')}}{{Spec2('SVG1.1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeEdgeFirefox (Gecko)IEOperaSafari
Support simple{{CompatChrome("1.0")}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.8")}}{{CompatIE("9.0")}}{{CompatOpera("8.0")}}{{CompatSafari("3.0.4")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Support simple{{CompatAndroid("3.0")}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.8")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatSafari("3.0.4")}}
+
+ +

Voir aussi

+ +
    +
  • {{SVGElement("line")}}
    • +
  • {{SVGElement("polygon")}}
    • +
diff --git a/files/fr/web/svg/element/radialgradient/index.html b/files/fr/web/svg/element/radialgradient/index.html new file mode 100644 index 0000000000..389e54aec3 --- /dev/null +++ b/files/fr/web/svg/element/radialgradient/index.html @@ -0,0 +1,157 @@ +--- +title: +slug: Web/SVG/Element/radialGradient +tags: + - Element + - SVG + - SVG Dégradé +translation_of: Web/SVG/Element/radialGradient +--- +
{{SVGRef}}
+ +
L'élément SVG <radialGradient> permet de définir un dégradé radial afin de dessiner un contour, ou de remplir des éléments SVG.
+ +

Contexte d'utilisation

+ +

{{svginfo}}

+ +

Attributs

+ +

Attributs globaux

+ + + +

Attributs spécifiques

+ +
    +
  • {{SVGAttr("gradientUnits")}}
    • +
  • {{SVGAttr("gradientTransform")}}
    • +
  • {{SVGAttr("cx")}}
    • +
  • {{SVGAttr("cy")}}
    • +
  • {{SVGAttr("r")}}
    • +
  • {{SVGAttr("fx")}}
    • +
  • {{SVGAttr("fy")}}
    • +
  • {{SVGAttr("fr")}}
    • +
  • {{SVGAttr("spreadMethod")}}
    • +
  • {{SVGAttr("xlink:href")}}
    • +
+ +

DOM Interface

+ +

Cet élément implémente l'interface {{domxref("SVGRadialGradientElement")}}.

+ +

Exemple

+ +

SVG

+ +
<svg width="120" height="120" viewBox="0 0 120 120"
+   xmlns="http://www.w3.org/2000/svg">
+
+  <defs>
+    <radialGradient id="exampleGradient">
+      <stop offset="10%" stop-color="gold"/>
+      <stop offset="95%" stop-color="green"/>
+    </radialGradient>
+  </defs>
+
+  <circle fill="url(#exampleGradient)" cx="60" cy="60" r="50"/>
+</svg>
+ +

Résultat

+ +

{{ EmbedLiveSample('Exemple', 120, 120, '', 'Web/SVG/Element/radialGradient') }}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('SVG2', 'pservers.html#RadialGradients', '<radialGradient>')}}{{Spec2('SVG2')}}Added fr attribute
{{SpecName('SVG1.1', 'pservers.html#RadialGradients', '<radialGradient>')}}{{Spec2('SVG1.1')}}Initial definition
+ +

Compatibilité des navigateurs

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)IEOperaSafari
Basic support{{CompatChrome('1.0')}}{{CompatVersionUnknown}}{{CompatGeckoDesktop('1.8')}}{{CompatIE('9.0')}}{{CompatOpera('9.0')}}{{CompatSafari('3.0.4')}}[1]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatAndroid('3.0')}}{{CompatVersionUnknown}}{{CompatGeckoMobile('1.8')}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatSafari('3.0.4')}}[1]
+
+ +

Le tableau est basé sur ces ressources.

+ +

[1] WebKit ne supporte pas l'interpolation des couleurs ({{WebKitBug("6034")}}).

+ +

Voir aussi

+ +
    +
  • {{SVGElement("linearGradient")}}
    • +
diff --git a/files/fr/web/svg/element/rect/index.html b/files/fr/web/svg/element/rect/index.html new file mode 100644 index 0000000000..1ccebc8c09 --- /dev/null +++ b/files/fr/web/svg/element/rect/index.html @@ -0,0 +1,74 @@ +--- +title: +slug: Web/SVG/Element/rect +tags: + - SVG + - SVG Element + - SVG Reference +translation_of: Web/SVG/Element/rect +--- +
{{SVGRef}}{{Draft("Cette version n'est pas à jour relativement à la version anglaise de référence, merci d'en tenir compte.")}}
+ +

L'élément rect est un élément de Formes basiques, utilisé pour dessiner des rectangles à partir de la  position d'un angle, de largeur et de la hauteur. Il peut aussi être utilisé avec des arrondis.

+ +

Usage

+ +

{{svginfo}}

+ +

Exemple

+ + + +
<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
+  <!-- Simple rect element -->
+  <rect x="0" y="0" width="100" height="100" />
+
+  <!-- Rounded corner rect element -->
+  <rect x="120" y="0" width="100" height="100" rx="15" ry="15" />
+</svg>
+ +

{{EmbedLiveSample('Exemple', 100, '100%')}}

+ +

Attributs

+ +

Attributs Globaux

+ + + +

Attributs spécifiques

+ +
    +
  • {{ SVGAttr("x") }}
    • +
  • {{ SVGAttr("y") }}
    • +
  • {{ SVGAttr("width") }}
    • +
  • {{ SVGAttr("height") }}
    • +
  • {{ SVGAttr("rx") }}
    • +
  • {{ SVGAttr("ry") }}
    • +
+ +

Interface DOM

+ +

Cet élément implémente l'interface SVGRectElement .

+ +

Compatibilité avec les navigateurs

+ +

{{Compat("svg.elements.rect")}}

+ +

 

+ +

Voir également

+ +
    +
  • {{ SVGElement("path") }}
    • +
diff --git a/files/fr/web/svg/element/stop/index.html b/files/fr/web/svg/element/stop/index.html new file mode 100644 index 0000000000..4d46a93753 --- /dev/null +++ b/files/fr/web/svg/element/stop/index.html @@ -0,0 +1,100 @@ +--- +title: +slug: Web/SVG/Element/stop +translation_of: Web/SVG/Element/stop +--- +
{{SVGRef}}
+ +

L'élément SVG <stop> définit une couleur supplémentaire dans une palette à utiliser pour un dégradé, et est contenu dans un élément {{SVGElement("linearGradient")}} ou {{SVGElement("radialGradient")}}.

+ +

Contexte d'utilisation

+ +

{{svginfo}}

+ +

Attributs

+ +

Attributs globaux

+ + + +

Specific attributes

+ +
    +
  • {{SVGAttr("offset")}}
    • +
  • {{SVGAttr("stop-color")}}
    • +
  • {{SVGAttr("stop-opacity")}}
    • +
+ +

DOM Interface

+ +

Cet élément implémenté l'interface {{domxref("SVGStopElement")}}.

+ +

Exemple

+ +

SVG

+ +
<svg width="160" height="95" viewBox="0 0 80 40"
+     xmlns="http://www.w3.org/2000/svg">
+
+  <defs>
+    <linearGradient id="MyGradient">
+      <stop offset="5%" stop-color="#F60" />
+      <stop offset="95%" stop-color="#FF6" />
+    </linearGradient>
+  </defs>
+
+  <!-- Contour de la zone de dessin en noir -->
+  <rect fill="none" stroke="black"
+        x="0.5" y="0.5" width="79" height="39"/>
+
+  <!-- Le rectangle est rempli avec un dégradé linéaire -->
+  <rect fill="url(#MyGradient)" stroke="black" stroke-width="1"
+        x="10" y="10" width="60" height="20"/>
+</svg>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Example", 160, 95)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('SVG2', 'pservers.html#GradientStops', '<stop>')}}{{Spec2('SVG2')}} 
{{SpecName('SVG1.1', 'pservers.html#GradientStops', '<stop>')}}{{Spec2('SVG1.1')}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.elements.stop")}}

+ +

Voir aussi

+ +
    +
  • {{SVGElement("linearGradient")}}
    • +
  • {{SVGElement("radialGradient")}}
    • +
diff --git a/files/fr/web/svg/element/style/index.html b/files/fr/web/svg/element/style/index.html new file mode 100644 index 0000000000..b053d89292 --- /dev/null +++ b/files/fr/web/svg/element/style/index.html @@ -0,0 +1,136 @@ +--- +title: