Nos gusta el uso de JQuery, plantillas con SVG, por ejemplo, para mostrar un Producto con un muy bien con el estilo de los precios.

Decir que tenemos una SVG que representa un complicado diseño. Es posible que la <input> etiquetas anidadas en el SVG y todavía funcionan dentro de HTML 5? Hay alternativas dentro de SVG para los datos de entrada del usuario, tal vez la extracción de ellos con Knockout.js?

Sé que usted podría utilizar el SVG en el sentido de un gráfico de fondo y cortar las posiciones, de modo que los campos del formulario de la línea de arriba. Estoy realmente interesado en tener la entrada declaraciones fluía por el SVG, si es posible.

1 Comentario

  1. 32

    Puede utilizar foreignObject. Un pequeño ejemplo :

    <?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>

    Este es un estándar SVG, pero he añadido elementos HTML entre el rectángulo y el círculo con la foreignObject etiqueta. El orden de la pila es respetado, el círculo de estar en frente de las entradas.

    Otras soluciones que existe en «pura» SVG, sino que dependen en gran medida de JavaScript. Aquí un ejemplo : http://www.carto.net/papers/svg/gui/textbox/

    • Puedo conseguir la entrada de dos cuadros dibujados, pero no puedo entrar en cualquier texto. Alguna idea de por qué? (Chrome 23/Ubuntu 11)
    • Puedo entrada sin ningún problema en Google Chrome 26 y Firefox 19, Arch Linux.
    • Si intenta esto, ser conscientes de la larga pendiente de Chrome/Webkit error reportado aquí: code.google.com/p/chromium/issues/detail?id=116566
    • La respuesta se debe indicar que foreignObject no está funcionando hasta IE11. Ver mi solución en stackoverflow.com/questions/4176146

Dejar respuesta

Please enter your comment!
Please enter your name here