aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/svg/element/feblend
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:40:17 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:40:17 -0500
commit33058f2b292b3a581333bdfb21b8f671898c5060 (patch)
tree51c3e392513ec574331b2d3f85c394445ea803c6 /files/fr/web/svg/element/feblend
parent8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff)
downloadtranslated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz
translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2
translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip
initial commit
Diffstat (limited to 'files/fr/web/svg/element/feblend')
-rw-r--r--files/fr/web/svg/element/feblend/index.html117
1 files changed, 117 insertions, 0 deletions
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: <feBlend>
+slug: Web/SVG/Element/feBlend
+tags:
+ - Element
+ - SVG
+ - SVG Filter
+translation_of: Web/SVG/Element/feBlend
+---
+<div>{{SVGRef}}</div>
+
+<p>La primitive de filtre <a href="/fr/docs/Web/SVG">SVG</a> <strong><code>&lt;feBlend&gt;</code></strong> 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")}}.</p>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_présentation">Attributs de présentation</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_primitives_de_filtre">Attributs de primitive de filtre</a></li>
+ <li>{{SVGAttr("class")}}</li>
+ <li>{{SVGAttr("style")}}</li>
+</ul>
+
+<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
+
+<ul>
+ <li>{{SVGAttr("in")}}</li>
+ <li>{{SVGAttr("in2")}}</li>
+ <li>{{SVGAttr("mode")}}</li>
+</ul>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface {{domxref("SVGFEBlendElement")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="SVG">SVG</h3>
+
+<pre class="brush: html; highlight[5-6]">&lt;svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+ &lt;defs&gt;
+ &lt;filter id="spotlight"&gt;
+ &lt;feFlood result="floodFill" x="0" y="0" width="100%" height="100%"
+ flood-color="green" flood-opacity="1"/&gt;
+ &lt;feBlend in="SourceGraphic" in2="floodFill" mode="multiply"/&gt;
+ &lt;/filter&gt;
+ &lt;/defs&gt;
+
+ &lt;image xlink:href="/files/6457/mdn_logo_only_color.png"
+ x="10%" y="10%" width="80%" height="80%"
+ style="filter:url(#spotlight);"/&gt;
+&lt;/svg&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemple", 200, 200)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">Spécification</th>
+ <th scope="col">Statut</th>
+ <th scope="col">Commentaire</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName("Filters 1.0", "#feBlendElement", "&lt;feBlend&gt;")}}</td>
+ <td>{{Spec2("Filters 1.0")}}</td>
+ <td>Modes de fusion externalisés vers {{SpecName("Compositing", "#ltblendmodegt")}}</td>
+ </tr>
+ <tr>
+ <td>{{SpecName("SVG1.1", "filters.html#feBlendElement", "&lt;feBlend&gt;")}}</td>
+ <td>{{Spec2("SVG1.1")}}</td>
+ <td>Définition initiale</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.elements.feBlend")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{SVGElement("filter")}}</li>
+ <li>{{SVGElement("animate")}}</li>
+ <li>{{SVGElement("set")}}</li>
+ <li>{{SVGElement("feColorMatrix")}}</li>
+ <li>{{SVGElement("feComponentTransfer")}}</li>
+ <li>{{SVGElement("feComposite")}}</li>
+ <li>{{SVGElement("feConvolveMatrix")}}</li>
+ <li>{{SVGElement("feDiffuseLighting")}}</li>
+ <li>{{SVGElement("feDisplacementMap")}}</li>
+ <li>{{SVGElement("feFlood")}}</li>
+ <li>{{SVGElement("feGaussianBlur")}}</li>
+ <li>{{SVGElement("feImage")}}</li>
+ <li>{{SVGElement("feMerge")}}</li>
+ <li>{{SVGElement("feMorphology")}}</li>
+ <li>{{SVGElement("feOffset")}}</li>
+ <li>{{SVGElement("feSpecularLighting")}}</li>
+ <li>{{SVGElement("feTile")}}</li>
+ <li>{{SVGElement("feTurbulence")}}</li>
+ <li><a href="/fr/docs/Web/SVG/Tutoriel/filtres">Tutoriel SVG: Filtres</a></li>
+</ul>