« 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 result d'une primitive précédente dans le même élément <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 result apparaît à de multiples endroits dans un élément <filter> donné, c'est la primitive de filtre avec cette valeur de result précédant la primitive en cours qui est la plus proche qui est utilisée.

Contexte d'utilisation

Catégories None
Valeur SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>
Animation Oui
Document normatif SVG 1.1 (2nd Edition)
SourceGraphic
Ce mot-clé désigne l'élément graphique sur lequel s'applique le <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 <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é 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é 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>

Éléments

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

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : a-mt
Dernière mise à jour par : a-mt,