web-dev-qa-db-fra.com

Champ de saisie de texte basé sur SVG

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

javascriptuser-interfacesvg
26
Yurii Rashkovskii

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

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

EDIT: ajouté xmlns donc cela fonctionne pour IE.

26
Ricardo Cruz

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

Comme mentionné dans un autre commentaire, jusqu'à IE11 ne prend pas en charge ForeignObject. À la place, 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 réé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(); });

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

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

8
Wolfgang Kuehn

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

5
Josef Engelfrost

J'ai vu n autre , notez qu'il nécessite la prise en charge de attribut 'editable' de SVG Tiny 1.2 ... c'est définitivement plus natif dans le sens où il n'y a pas de une seule ligne de javascript dans cet exemple. Essayez-le dans Opera .

3
Erik Dahlström