Generate the SVG path `d` attribute content to draw a rounded rectangle - Node.js HTML

Node.js examples for HTML:SVG

  1. HOME
  2. Node.js
  3. HTML
  4. SVG

Description

Generate the SVG path `d` attribute content to draw a rounded rectangle

Demo Code


/**/*from ww w.ja  v  a 2 s .  c  o  m*/
 * Function to generate the SVG path `d` attribute content to draw a rounded rectangle.
 *
 * @param {Number} x X coordinate
 * @param {Number} y Y coordinate
 * @param {Number} w bar width
 * @param {Number} h bar height
 * @param {Number} r corner radius
 * @param {Boolean} tl top-left corner should be rounded?
 * @param {Boolean} tr top-right corner should be rounded?
 * @param {Boolean} bl bottom-left corner should be rounded?
 * @param {Boolean} br bottom-right corner should be rounded?
 * @return {string} the value to insert in the `d` attribute of the path element
 */
roundedRect = function (x, y, w, h, r, tl, tr, bl, br) {
    var retval;
    retval  = "M" + (x + r) + "," + y;
    retval += "h" + (w - 2*r);
    if (tr) { retval += "a" + r + "," + r + " 0 0 1 " + r + "," + r; }
    else { retval += "h" + r; retval += "v" + r; }
    retval += "v" + (h - 2*r);
    if (br) { retval += "a" + r + "," + r + " 0 0 1 " + -r + "," + r; }
    else { retval += "v" + r; retval += "h" + -r; }
    retval += "h" + (2*r - w);
    if (bl) { retval += "a" + r + "," + r + " 0 0 1 " + -r + "," + -r; }
    else { retval += "h" + -r; retval += "v" + -r; }
    retval += "v" + (2*r - h);
    if (tl) { retval += "a" + r + "," + r + " 0 0 1 " + r + "," + -r; }
    else { retval += "v" + -r; retval += "h" + r; }
    retval += "z";
    return retval;
};

Related Tutorials