SVG à base de champ de saisie de texte

il y a 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>

ceci est pour MS Internet Explorer, non testé dans aucun autre navigateur.

comme mentionné dans un autre commentaire, jusqu'à IE11 ne supporte pas foreignObject. Utilisez plutôt l'attribut contentEditable.

exemple SVG simple

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

D3.exemple js avec liaison de données

ici, nous écoutons les événements clés pour écrire le texte vers 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 noeuds sont générés dynamiquement comme avec d3.js, vous capitaliser contentEditablecomme tel (ce qui m'a pris un peu de temps)!

Remarque:: ne style pas votre texte avec pointer-events: None, car alors vous ne pouvez plus interagir avec le texte, quel que soit le réglage satisfaisant.

Je l'ai cherché pour un projet sur lequel je travaille. Nous n'avons rien trouvé de convenable donc nous codons notre propre solution, j'espère que c'est assez bon pour que quelqu'un d'autre n'ait pas à faire la même chose: http://engelfrost.github.io/svg-input-elements/

j'ai vu un autre, notez qu'il nécessite un support pour le 'modifiable' attribut à partir de SVG Tiny 1.2... il est certainement plus naturel dans le sens où il n'y a pas une seule ligne de javascript dans cet exemple. Essayer dans Opéra.