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.
<svg width="100" height="100" > <g transform="translate(40,40)"> <text contentEditable="true">foo</text> </g> </svg>
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.