Champ de saisie de texte basé sur SVG

Est-ce que quelqu'un a vu une implémentation javascript d'un champ de saisie de texte en plus de http://www.carto.net/papers/svg/gui/textbox/ ?

Il existe un noeud SVG intéressant appelé foreignObject , qui vous permet de placer HTML, flash, etc. dans votre code SVG. Essayez ce qui suit:

 <svg width="100%" height="500"> <foreignObject x="10" y="10" width="100" height="150"> <div xmlns="http://www.w3.org/1999/xhtml"> <input></input> </div> </foreignObject> </svg> 

J'ai cherché cela pour un projet sur lequel je travaille. Nous ne trouvions rien d'approprié, donc nous codons notre propre solution, j'espère que c'est assez bon pour que quelqu'un d'autre ne fasse pas de même: http://engelfrost.github.io/svg-input-elements/

J'ai vu un autre , note qu'il nécessite un support pour l' attribut «éditable» de SVG Tiny 1.2 … il est définitivement plus natif dans le sens qu'il n'y a pas une seule ligne de javascript dans cet exemple. Essayez-le dans Opera .

C'est pour MS Internet Explorer, pas testé dans un autre navigateur.

Comme mentionné dans un autre commentaire, IE11 ne supporte pas foreignObject. Au lieu de cela, utilisez l'attribut contentEditable.

Exemple SVG simple

 <svg width="100" height="100" > <g transform="translate(40,40)"> <text contentEditable="true">foo</text> </g> </svg> 

Exemple D3.js avec liaison de données

Ici, nous écoutons les événements clés pour écrire le texte dans les données.

 selection. .append("text") .attr("contentEditable", true) .text(function(d) { return d.text }) .on("keyup", function(d) { d.text = d3.select(this).text(); }); 

Remarque : Si les nœuds sont dynamiquement générés comme avec d3.js, vous devez capitaliser le contentEditable comme tel (cela m'a pris du temps)!

Remarque : ne stylez pas votre texte avec pointer-events: None , car vous ne pouvez plus interagir avec le texte, quel que soit le paramètre contentEditable.