J'ai le problème suivant : je veux créer dynamiquement des boutons HTML dans un document SVG. D'abord je regarde le document SVG, je trouve le reactangle approprié et je remplace le rectangle par <foreignObject> élément. Je suis capable de générer le SVG suivant
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="100%"
height="100%"
viewBox="0 0 93.875076 43.283451"
id="svg20755"
xml:space="preserve">
<g id="Button-1" transform="translate(0.5000775,0.50220189)">
<foreignObject xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="93" height="43">
<body xmlns="http://www.w3.org/1999/xhtml" style="margin: 0px; height: 100%;">
<button type="button" style="width:100%; height:100%;" onclick="alert('Button clicked')">
Juhuhuhu!
</button>
</body>
</foreignObject>
</g>
</svg>Voici comment je crée l'élément.
var ns_HTML = 'http://www.w3.org/1999/xhtml';
var ns_SVG = REX.HELPERS.ns_svg;
var element = <Some code to load an SVG element>
var foreignObject = document.createElementNS(ns_SVG, 'foreignObject');
var body = document.createElementNS(ns_HTML, 'body');
body.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml'); // FF
body.style.margin = '0px';
body.style.height = '100%';
var button = document.createElementNS(ns_HTML, 'button');
button.setAttribute('type','button');
button.setAttribute('style','width:100%; height:100%;');
button.innerHTML = 'Test!';
body.appendChild(button);
foreignObject.appendChild(body);J'ai deux problèmes, notamment dans le navigateur Chrome :
- L'élément
<body>n'a pas rempli la hauteur de la<foreignObject> -
Le site(Il semble que ce problème ait été corrigé dans les nouvelles versions de Chrome et de Firefox).buttonne se comportait pas comme un bouton (pas de réaction au passage de la souris et à la descente de la souris)
JSFiddle ici
