Menu
I want to create a rectangle inside an HTML page, then write some text on that rectangle. I also need that text to be a hyperlink. This is what I did but it is not working:
<!DOCTYPE html> <html> <body> <script> var svg = document.documentElement; var svgNS = svg.namespaceURI; var rect = document.createElementNS(svgNS,'rect'); rect.setAttribute('x',5); rect.setAttribute('y',5); rect.setAttribute('width',500); rect.setAttribute('height',500); rect.setAttribute('fill','#95B3D7'); svg.appendChild(rect); document.body.appendChild(svg); var h=document.createElement('a'); var t=document.createTextNode('Hello World'); h.appendChild(t); document.body.appendChild(h); </script> </body> </html> Can you help please? Thanks.
943
Like HTML, SVGs are represented using the Document Object Model (DOM) and so can be manipulated with Javascript relatively easily, especially if you are familiar with using JS with HTML. All the code examples can be found by following the Github link at the top of this post.
You can embed SVG elements directly into your HTML pages.
SVGs are considered to be more accessible as they support text, and canvas is dependent on Javascript. So, the event that the browser does not support SVG but still text can be displayed. If Javascript has been disabled, then the device cannot be able to interpret the javascript output.
You can see that the final markup for both SVG is exactly the same. The only difference is one is static in the HTML, the other is created dynamically via javascript.
Change
var svg = document.documentElement; to
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); so that you create a SVG element.
For the link to be an hyperlink, simply add a href attribute :
h.setAttributeNS(null, 'href', 'http://www.google.com'); Demonstration
62
To facilitate svg editing you can use an intermediate function:
function getNode(n, v) { n = document.createElementNS("http://www.w3.org/2000/svg", n); for (var p in v) n.setAttributeNS(null, p, v[p]); return n } Now you can write:
svg.appendChild( getNode('rect', { width:200, height:20, fill:'#ff0000' }) ); Example (with an improved getNode function allowing camelcase for property with dash, eg strokeWidth > stroke-width):
function getNode(n, v) { n = document.createElementNS("http://www.w3.org/2000/svg", n); for (var p in v) n.setAttributeNS(null, p.replace(/[A-Z]/g, function(m, p, o, s) { return "-" + m.toLowerCase(); }), v[p]); return n } var svg = getNode("svg"); document.body.appendChild(svg); var r = getNode('rect', { x: 10, y: 10, width: 100, height: 20, fill:'#ff00ff' }); svg.appendChild(r); var r = getNode('rect', { x: 20, y: 40, width: 100, height: 40, rx: 8, ry: 8, fill: 'pink', stroke:'purple', strokeWidth:7 }); svg.appendChild(r);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
