0
J'ai un foreignObject dans un élément SVG. Tous les autres éléments s'affichent, mais le foreignObject est invisible avec son contenu. Testé dans Chrome, Firefox et Edge, tous avec le même résultat.SVG foreignObject ne montre pas sur n'importe quel navigateur, pourquoi?
Voici le code:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="v-2" width="100%" height="100%">
<g id="v-3" class="joint-viewport" transform="matrix(1,0,0,1,-1597.0002028000001,95.99995439999998)">
...
<g id="j_29" model-id="e8dbd7a4-5d3d-44e5-85a0-09413112a39b" class="joint-theme-default joint-cell joint-type-html joint-type-html-element joint-element" data-type="html.Element" fill="#ffffff" stroke="none" transform="translate(1898.0001898,268.0000346)">
<g class="rotatable" id="v-206">
<rect class="body" id="v-207" stroke="none" fill-opacity="0" fill="#ffffff" width="100" height="60"></rect>
<text class="label" id="v-208" font-size="14" y="0.8em" display="none" xml:space="preserve" fill="#000000" text-anchor="middle" font-family="Arial, helvetica, sans-serif" transform="matrix(1,0,0,1,125,20)">
<tspan id="v-209" class="v-line v-empty-line" dy="0em" x="0" style="fill-opacity: 0; stroke-opacity: 0;">-</tspan>
</text>
<foreignObject requiredExtensions="http://www.w3.org/1999/xhtml" width="100%" height="100">
<body xmlns="http://www.w3.org/1999/xhtml">
<input xmlns="http://www.w3.org/1999/xhtml" type="text" value="I'm HTML input">
</body>
</foreignObject>
</g>
</g>
</g>
<defs id="v-4"></defs>
</svg>
Q: Qu'est-ce que que je fais mal?
MISE À JOUR: Je remarqué quelques petites choses:
- ajoutant
xmlns="http://www.w3.org/1999/xhtml"à l'entrée en fait afficher sur Edge. Sur les autres navigateurs, il est toujours invisible. - Sur Chrome, si j'édite l'élément
<g>externe en sélectionnant «Modifier au format HTML», mais n'apporte aucune modification et quitte le mode d'édition, l'entrée s'affiche. - en ajoutant
requiredExtensions="http://www.w3.org/1999/xhtml"à l'étiquetteforeignObjectet/ou l'étiquette de corps ne fait aucune différence.
Je dois manquer quelque chose ...
Comment créez-vous ceci? On dirait que c'est dans l'espace de noms html plutôt que dans l'espace de noms SVG. BTW s'il vous plaît ne pas poster des photos de code, code postal comme texte. –
@RobertLongson Salut, merci pour la réponse. J'ai mis à jour le message avec le code. Il a des blocs de mouvement, mais ils sont tous similaires, donc je les ai dépouillés et laissé juste le problème. –
Si je supprime les attributs de transformation (de sorte que foreignObject est à l'écran), OK s'affiche pour moi. –