5578 sujets

Sémantique web et HTML

Pourquoi l'élément <div> de HTML s'affiche en roude dans VS Co

Bonjour à vous tous,

Je suis en train de tester du code HTML dans des éléments SVG et je constate que l'élément <div> s'affiche en rouge dans VS Code, quand il est incorporé dans du code SVG, comme si VS Code voulait m'avertir que cet élément est obsolète ou déprécié. Voici un exemple :
<!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>Elément &lt;div&gt; dans une boîte SVG</title>
</head>

<body>
    <svg width="250" height="150" xmlns="http://www.w3.org/2000/svg" class="mon_svg2">
        <foreignObject x="10" y="10" width="280" height="130">
            <div xmlns="http://www.w3.org/1999/xhtml" style="background: lightgrey; height: 100%;">
                Contenu HTML dans un SVG !
            </div>
        </foreignObject>
    </svg>
</body>

</html>

Dans cet exemple, l'élément <div> dans le code SVG est écrit normalement, c'est quand on le copie dans VS Code qu'il passe au rouge.

Quelqu'un saurait m'expliquer le pourquoi du comment ?
Merci pour votre aide
Modifié par ObiJuanKenobi (11 Mar 2025 - 08:30)
Modérateur
Bonjour,

C'est en principe possible et valide en suivant quelques recommandations pour s'assurer d'un affichage :

1. En déclarant le bon espace de nom dans l’élément pour s'assurer de son affichage via l'attribut xmlns.
Par exemple
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <foreignObject x="40" y="40" width="100" height="100">
    <div xmlns="http://www.w3.org/1999/xhtml">test</div>
  </foreignObject>
</svg>

ou l'attribut requiredExtensions sur l'element foreignObject lui même exemple
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <foreignObject x="40" y="40" width="100" height="100" requiredExtensions="http://www.w3.org/1999/xhtml">
    <div>test</div>
  </foreignObject>
</svg>

2. Puis, l’élément switch permettra d'afficher une alternative SVG si l'url de l'espace de nom est mauvaise ou pas supporté par le navigateur:
<svg width="120" height="120" version="1.1" xmlns='http://www.w3.org/2000/svg'>
  <desc>This example uses the 'switch' element to provide a
    fallback graphical representation of an paragraph, if
    XMHTML is not supported.</desc>
  <switch>
    <foreignObject width="100%" height="100%" requiredExtensions="http://www.w3.org/1999/xhtml">
        <div>Voici un div avec du texte fluide</div>
    </foreignObject>
    <!-- si non on montre : -->
    <text font-size="10" font-family="Verdana">
      <tspan x="10" y="10">Voici du texte</tspan>
      <tspan x="10" y="20">sans retour à la</tspan>
      <tspan x="10" y="30">ligne automatique.</tspan>
    </text>
  </switch>
</svg>


Merci pour la question, maintenant je sais pas si ton éditeur saura faire la difference Smiley smile

Sources:
https://www.w3.org/TR/SVG11/extend.html#EmbeddingForeignObjects
https://www.w3.org/TR/xml-names/
https://www.w3.org/TR/SVG11/struct.html#ConditionalProcessingRequiredExtensionsAttribute

Cdt
Modifié par gcyrillus (11 Mar 2025 - 16:46)
VS Code marque <div> en rouge car il le considère comme hors contexte dans le SVG. L'éditeur peut mal interpréter le xmlns="http://www.w3.org/1999/xhtml". Certaines extensions de VS Code signalent les éléments HTML dans un <foreignObject> comme erreurs. Ce n'est pas une erreur de syntaxe, mais plutôt un avertissement d'analyse. Vous pouvez ignorer cela si le rendu fonctionne correctement.
Meilleure solution
Modérateur
Ah mince, je n'ai pas vu <foreignObject>. Je ne connaissais pas cet élément. Est ce pertinent d'inclure du HTML dans du SVG ? Un document SVG est lui même du contenu. Peut être dans la mise en forme d'un texte au sein d'un svg ? Pourtant, il me semble bien que l'on puisse mettre en forme du texte dans un svg. Hormis cela, je ne vois pas l'intérêt.

@gcyrillus : Merci Smiley smile

ps: dans mon éditeur, pas de message d'erreur (ce n'est pas VSC).
Modifié par niuxe (11 Mar 2025 - 17:57)
Prévenir un modérateur
Répondre au sujet
Aller à