Menu
Has anyone seen any javascript implementation of a text input field besides http://www.carto.net/papers/svg/gui/textbox/ ?
505
SVG treats a text element in much the same way that it treats graphical and shape elements. You position text with x and y coordinates and use fill and stroke options to color text the same way you would with a <circle> or <rect> element.
try the following code. var svg = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30px" height="30px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">'+ '<path fill="#156BB1" d="M22.
The <text> element can be arranged in any number of sub-groups with the <tspan> element. Each <tspan> element can contain different formatting and position. Text on several lines (with the <tspan> element): Several lines: First line.
Just like you use stroke for the outline color and fill for the inside color of a shape, you can do the same thing for text in SVGs. And the best news is, if you use fill="currentColor" instead of a hard coded color, you can set the SVG text with CSS. Click run code snippet to see an example right in this answer.
There is an interesting SVG node called foreignObject, which allows you to place HTML, flash, etc within your SVG code. Try the following:
<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: added xmlns so it works for IE.
107
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
