Est-il possible de mélanger formulaire HTML input balises SVG, ou utiliser SVG pour disposer d'un formulaire?

Nous aimons à l'aide de JQuery templates avec SVG par exemple pour afficher un Produit avec un joliment stylisé prix.

Dire que nous avons un SVG qui représente un complexe de mise en page. Est-il possible d'avoir le <input> balises imbriquées dans le SVG et travaillent encore dans le HTML 5? Existe-il des solutions de rechange à l'intérieur du format SVG pour des données d'entrée de l'utilisateur, peut-être que leur extraction avec Knockout.js?

Je sais que tu pourrais utiliser le SVG dans le sens d'un graphique d'arrière-plan et de pirater les positions de sorte que la forme des champs de la ligne. Je suis vraiment intéressé à faire de la saisie des déclarations versé par le SVG si possible.

InformationsquelleAutor Zachary Scott | 2011-05-12
  1. 32

    Vous pouvez utiliser foreignObject. Un petit exemple :

    <?xml version="1.0" standalone="yes"?>
<svg xmlns = "http://www.w3.org/2000/svg" width="100%" height="100%">
    <rect x="25" y="25" width="250" height="200" fill="#ff0000" stroke="#000000"/>
    <foreignObject x="50" y="50" width="200" height="150">
        <body xmlns="http://www.w3.org/1999/xhtml">
            <form>
                <input type="text"/>
                <input type="text"/>
            </form>
        </body>
    </foreignObject>
    <circle cx="60" cy="80" r="30" fill="#00ff00" fill-opacity="0.5"/>
</svg>

    C'est une norme SVG, mais j'ai ajouté des éléments HTML entre le rectangle et le cercle à l'aide de la foreignObject tag. L'ordre de la pile est respecté, le cercle étant devant les entrées.

    D'autres solutions existe en "pur" SVG, mais ils s'appuient largement sur le JavaScript. Voici un exemple : http://www.carto.net/papers/svg/gui/textbox/

    • Je reçois les deux boîtes d'entrée élaboré, mais je ne peut pas entrer n'importe quel texte. Aucune idée pourquoi? (Chrome 23/Ubuntu 11)
    • Je peux d'entrée sans problème dans Google Chrome 26 et Firefox 19, Arch Linux.
    • Si vous essayez cela, être conscient de la longue exceptionnelle Chrome/Webkit bug signalé ici: code.google.com/p/chromium/issues/detail?id=116566
    • La réponse devrait indiquer que foreignObject n'est pas de travail jusqu'à IE11. Voir ma solution de contournement dans stackoverflow.com/questions/4176146
    InformationsquelleAutor Planplan