How to draw a rounded corner in rectangle's bottom svg JS

Question

I want to draw a rectangle with rounded corner only on the bottom of the place without using external source using HTML5 SVG element. Any one can help on this?. I have attached the expected output.

Thanks, Bharathi

Answer 1

Below is a function entitled makeShape that draws the desired shape. The input parameters are x (ie left), y (ie top), width, height and r (ie corner radius). It returns an svg path element.

To learn more you can consult this general reference for SVG , as well as specific information about how to create a path .

The demo below creates shapes with random positions and dimensions, including random corner radii. Comments in the code explain how this is done.

 // the shape creation function var makeShape = function(x, y, width, height, r) { var xmlns = "http://www.w3.org/2000/svg"; var spc = " ", // path drawing instruction letters with readable names moveTo = "M", horizLineTo = "h", vertLineTo = "v", arcTo = "a", closePath = "z"; var dStr = // the "d" path for the svg path moveTo + spc + x + spc + y + spc + vertLineTo + spc + (height - r) + spc + arcTo + spc + r + spc + r + spc + 0 + spc + 0 + spc + 0 + spc + r + spc + r + spc + horizLineTo + spc + (width - 2 * r) + spc + arcTo + spc + r + spc + r + spc + 0 + spc + 0 + spc + 0 + spc + r + spc + (-r) + spc + vertLineTo + spc + (r - height) + spc + closePath; var shape = document.createElementNS(xmlns, "path"); // create the (orphan) svg path element shape.setAttribute("d", dStr); // add the "d" attribute to the path, giving it a shape return shape; // return it from the function }; // demo code for creating randomly positioned and proportioned example shapes document.querySelector("button").addEventListener("click", function() { var path = document.querySelector("path"); // if any previous paths exist, delete them if (path) {path.parentNode.removeChild(path);} var x = Math.random() * 140 + 10; // calculate random location and proportions for the shape var y = Math.random() * 65 + 10; var width = 400 - x * 2; var height = 150 - y * 2; var r = Math.random() * Math.min(width / 2, height); // the corner radius var shape = makeShape(x, y, width, height, r); // create the orphan shape shape.setAttribute("stroke", "grey"); // style its appearance shape.setAttribute("fill", "red"); shape.setAttribute("stroke-width", "4"); document.querySelector("svg").appendChild(shape); // add the shape to the SVG DOM }); 

 <svg width="400" height="150"></svg> <div><button>Draw random shape</button></div>