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

CatégoriesÉlément de filtre
Contenu autoriséTout élément de cette liste, quel qu'en soit l'ordre:
<animate>, <set>

Attributs

Attributs globaux

Attributs spécifiques

Interface DOM

Cet élément implémente l'interface 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>

Spécifications

Spécification Statut Commentaire
Filter Effects Module Level 1
La définition de '<feTurbulence>' dans cette spécification.
Version de travail Aucun changement
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
La définition de '<feTurbulence>' dans cette spécification.
Recommendation Définition initiale

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome Support complet OuiEdge Support complet Oui
Notes
Support complet Oui
Notes
Notes Partially supported, see bug 12382004.
Firefox Support complet 4IE Support complet Oui
Notes
Support complet Oui
Notes
Notes Partially supported, see bug 12382004.
Opera Support complet 9Safari ? WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet Oui
Notes
Support complet Oui
Notes
Notes Partially supported, see bug 12382004.
Firefox Android Support complet OuiOpera Android Support complet OuiSafari iOS ? Samsung Internet Android ?
baseFrequencyChrome Support complet OuiEdge Support complet Oui
Notes
Support complet Oui
Notes
Notes Partially supported, see bug 12382004.
Firefox Support complet 4IE Support complet Oui
Notes
Support complet Oui
Notes
Notes Partially supported, see bug 12382004.
Opera Support complet 9Safari ? WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet Oui
Notes
Support complet Oui
Notes
Notes Partially supported, see bug 12382004.
Firefox Android Support complet OuiOpera Android Support complet OuiSafari iOS ? Samsung Internet Android ?
numOctavesChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
seedChrome Support complet OuiEdge Support complet Oui
Notes
Support complet Oui
Notes
Notes Partially supported, see bug 12382004.
Firefox Support complet 4IE Support complet Oui
Notes
Support complet Oui
Notes
Notes Partially supported, see bug 12382004.
Opera Support complet 9Safari ? WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet Oui
Notes
Support complet Oui
Notes
Notes Partially supported, see bug 12382004.
Firefox Android Support complet OuiOpera Android Support complet OuiSafari iOS ? Samsung Internet Android ?
stitchTilesChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
typeChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue
Voir les notes d'implémentation.
Voir les notes d'implémentation.

Voir aussi

Étiquettes et contributeurs liés au document

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