jquery - before - ¿Es posible mezclar etiquetas de entrada de formulario HTML con SVG o usar SVG para diseñar un formulario?
prepend javascript (1)
Puede usar 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 SVG estándar, pero agregué elementos HTML entre el rect y el círculo usando la etiqueta foreignObject. El orden de la pila se respeta, el círculo está en frente de las entradas.
Existen otras soluciones en SVG "puro", pero dependen en gran medida de JavaScript. Aquí un ejemplo: http://www.carto.net/papers/svg/gui/textbox/
Nos gusta usar plantillas de JQuery con SVG, por ejemplo, para mostrar un Producto con un precio muy bien diseñado.
Digamos que tenemos un SVG que representa un diseño complicado. ¿Es posible tener las etiquetas <input> anidadas en SVG y aún funcionar dentro de HTML 5? ¿Hay alternativas dentro de SVG para ingresar datos del usuario, quizás extraerlos con Knockout.js?
Sé que podrías usar el SVG en el sentido de un gráfico de fondo y piratear las posiciones para que los campos del formulario se alineen. Estoy realmente interesado en tener las declaraciones de entrada fluidas por el SVG si es posible.