Menu
We like using jQuery templates with SVG for example to show a Product with a nicely styled price.
Say we have an SVG that represents a complicated layout. Is it possible to have the <input> tags nested in the SVG and still work within HTML 5? Are there alternatives within SVG to input data from the user, maybe extracting them with Knockout.js?
I know you could use the SVG in the sense of a background graphic and hack the positions so that the form fields line up. I am really interested in having the input statements flowed by the SVG if possible.
397
SVG images can be written directly into the HTML document using the <svg> </svg> tag. To do this, open the SVG image in VS code or your preferred IDE, copy the code, and paste it inside the <body> element in your HTML document.
The <svg> tag defines a container for SVG graphics. SVG has several methods for drawing paths, boxes, circles, text, and graphic images.
You can use foreignObject. A small example :
<?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> This is a standard SVG, but I added HTML elements between the rect and the circle using the foreignObject tag. The stack order is respected, the circle being in front of the inputs.
Other solutions exists in "pure" SVG, but they heavily rely on JavaScript. Here an example : http://www.carto.net/papers/svg/gui/textbox/
187
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
