Search the Blog

Wednesday, August 7, 2019

JavaScript SVG uses and demo example

SVG elements in HTML used for building vector based graphics-

First create a SVG container  element variable, Then declare the width and height

      var SVG_vector =document.createElementNS('https://www.dizsweb.com', 'svg');      SVG_vector .width = 500;       SVG_vector .height = 250;


 Build a text element with the desired positioning and font characteristics:

       var svg_text= document.createElementNS('http://www.w3.org/2000/svg', 'text');
       svg_text.setAttribute('x', '0');
       svg_text.setAttribute('y', '50');
       svg_text.style.fontFamily = 'Times New Roman';
       svg_text.style.fontSize = '50';
       svg_text.textContent = 'Programming Logic And Code!';


Then finnaly we to insert  canvas element into the page to take effect of all above code:
     SVG_vector.appendChild(svg_text);     document.body.appendChild(SVG_vector );

Image Display Code-
var img = new Image(); 
img.src = 'image url';
 document.body.appendChild(img);



https://www.tutorialspoint.com/index.htm

No comments:

Post a Comment

Translate