5572 sujets

Sémantique web et HTML

Pourquoi mon code SVG ne fonctionne pas ?

Bonjour à vous tous,

Je suis en train de passer en revue toutes les balises de SVG et je suis tombé sur le code suivant :
<!DOCTYPE html>
<html lang="fr">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Balise feImage dans le contexte SVG</title>
</head>
<body>
<svg width="300" height="200">
    <defs>
        <filter id="rippleEffect">
            <feImage href="water-texture.jpg" result="texture" />
            <feDisplacementMap in="SourceGraphic" in2="texture" scale="20" />
        </filter>
    </defs>
    <text x="50" y="100" font-size="30" filter="url(#rippleEffect)">Texte ondulé</text>
</svg>
</body>
</html>

Je suis allé chercher l'image de teture d'eau sur une banque d'images et je l'ai enregistrée au même niveau que le fichier index.html et j'ai aussi vérifié l'orthographe du nom de fichier. J'ai également vérifié sur Can I Use si la balise <feImage> est supportée par Chrome et c'est le cas. Savez-vous pourquoi le texte n'est pas ondulé ?
Modifié par ObiJuanKenobi (07 Jan 2025 - 11:50)
Modérateur
Salut ObiJuanKenobi,

Je en connaissait pas ce feImage..
Est-ce que tu pourrais joindre le fichier image en question (s'il est gratuit, ou équivalent pour qu'on puisse tester) ?

Bonne journée
salut
je fait comme çà pour faire onduler une image
et puis tu t'amuse avec les parametres filtre SVG
je n'ai pas essayé sur du texte


<!DOCTYPE html>
<html lang="fr">

<head>
<meta charset="UTF-8">
<style>
html, body {
margin: 0;
padding: 0;
}
.imgcover {
position: relative;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
.divwave  {
position: relative;
width: 90%;
left: 5%;
height: 75vh;
overflow: hidden;
padding-bottom: 20px;
outline: 10px #FFf solid;
outline-offset: -10px;
}
</style>
   
</head>

<body>
<div class="divwave">

<svg viewBox="0 0 180 100">

<filter id="noise">
    <feTurbulence type="turbulence" 
            baseFrequency="0.5" id="turbulence" 
            numOctaves="3" result="turbulence" seed="5">
        <animate id="noiseAnimate" attributeName="baseFrequency" 
            values="0;0.05;0,0" from="0" to="100" dur="10s" 
            repeatCount="indefinite">
        </animate>
    </feTurbulence>

    <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="1" 
        xChannelSelector="R" yChannelSelector="R">
    </feDisplacementMap>
</filter>

<foreignObject width="100%" height="100%">
    <img src="monimage.webp" class="imgcover" 
    style="filter: url(#noise);">
</foreignObject>

</svg>

</div>
</body>
</html>
En effet, ton code n'est pas mal mais mon exemple est basé sur du texte ondulé et j'aimerai bien comprendre pourquoi il ne fonctionne pas.
Administrateur
Hello,

Tu es sûr que le chemin vers ton image est OK et que celle-ci est "compatible" avec l'effet `feImage` ? https://developer.mozilla.org/fr/docs/Web/SVG/Element/feImage

S'il s'agit d'une ondulation simple, ce serait plus rapide de faire en sorte que le texte suive un parcours SVG (et bien plus facile à maintenir / modifier ensuite), tu ne crois pas ?

EDIT. Un petit exemple de ce que je veux dire :

<svg width="300" height="200">
      <defs>
        <path id="wavyPath" d="M 50,100 C 80,80 120,120 160,100 C 200,80 240,120 280,100" fill="none" />
      </defs>
      <text font-size="24">
        <textPath href="#wavyPath">Texte ondulé</textPath>
      </text>
    </svg>

Modifié par Raphael (09 Jan 2025 - 09:26)
Administrateur
ObiJuanKenobi a écrit :
Voila le fichier en question :
upload/1736351492-62242-water-texture.jpg

Je viens quand même de tester ton code initial.

En copiant-collant ton code tel avec ton image comme référence, ton effet fonctionne pourtant bien (même si le résultat est un peu bizarre).

upload/1736411597-1-capturedaeacran2025-01-09aa09.31..png
Raphael a écrit :
Hello,

Tu es sûr que le chemin vers ton image est OK et que celle-ci est "compatible" avec l'effet `feImage` ?

J'ai placé mon image JPG et le fichier HTML sur le bureau, au même niveau, et le navigateur se contente d'afficher "Texte ondulé". Ce fichier JPG est exactement le même que celui que j'ai donné sur le forum. Je n'obtiens pas du tout la même chose que toi. Normalement, d'après ce que j'ai compris, le texte devrait être ondulé, comme si on le voyait à travers de l'eau qui bouge.
Modifié par ObiJuanKenobi (09 Jan 2025 - 10:40)
Bonjour,

Si ça peut aider : en testant ton code initial avec l'image uploadé sur alsacreation via jsbin.com, l'effet sur l'image n'est pas appliquée.
En utilisant l'image au format base64, j'obtient bien le même résultat que Raphael (p-e un problème de crossorigin).

Je ne sais pas si ça peut être lié mais tu consultes bien ta page html via le protocole http:// et pas le protocole file:// ?
Pitet a écrit :
Je ne sais pas si ça peut être lié mais tu consultes bien ta page html via le protocole http:// et pas le protocole file:// ?

Pour consulter la page HTML, je passe par VS Code, en sélectionnant "Open in other browser", après avoir fait un clic-droit sur le document, et en choisissant "Goggle..." comme navigateur.
Modifié par ObiJuanKenobi (09 Jan 2025 - 16:01)
Quel est le protocole affiché dans la barre d'adresse de ton navigateur lorsque tu consultes le fichier ?
Si c'est file://, essaye de passer par le protocole http via un serveur web local ou en ligne, ou faire un test via un site tel que jsbin ou codepen par exemple.
J'ai trouvé une autre solution, je n'utilise plus la balise <feImage> mais la balise <turbulence> :
<!DOCTYPE html>
<html lang="fr">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Balise feImage dans le contexte SVG</title>
</head>

<body>
  <svg width="500" height="150" xmlns="http://www.w3.org/2000/svg">
    <!-- Définition du filtre -->
    <defs>
      <filter id="waterEffect" x="0" y="0" width="100%" height="100%">
        <!-- Génération des turbulences (effet d'eau) -->
        <feTurbulence type="fractalNoise" baseFrequency="0.02 0.04" numOctaves="3" seed="5" result="turbulence" />
        <!-- Animation des turbulences pour simuler le mouvement -->
        <animate xlink:href="#turbulence" attributeName="baseFrequency" from="0.02 0.04" to="0.05 0.08" dur="4s"
          repeatCount="indefinite" />
        <!-- Application de la carte de déplacement sur le texte -->
        <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="20" />
      </filter>
    </defs>

    <!-- Texte avec l'effet appliqué -->
    <text x="50" y="100" font-size="48" font-family="Arial, sans-serif" fill="blue" filter="url(#waterEffect)">
      Texte ondulé
    </text>
  </svg>
</body>

</html>

Le résultat est le suivant :
upload/1736602572-62242-capturedncran2025-01-11143558.png
Prévenir un modérateur
Répondre au sujet
Aller à