CODEWITHSUNDEEP
svgd3.js
Ashiqur Rahman
Ashiqur Rahman

Reputation: 51

Border radius in SVG d3

I have following svg:

    ` svg.append('g')
       .append("path")
        .attr("d", "M 0 150 L 0 0 L 190 0 L 190 150 Z")
        .attr("fill", "#f6f6f6"); `

Look like this: enter image description here

But I want like this:

enter image description here

enter image description here

enter image description here

enter image description here

I don't have much knowledge about svg curve. How can I set border radius like this?

Upvotes: 0

Views: 918

Answers (2)

Michael Rovinsky
Michael Rovinsky

Reputation: 7210

You can find a detailed description of path here: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths

The simplest way to round a corner is Quadratic Bezier path. For example, if you need to round a top-right corner with approximate radius r, and the coordinate of the corner are x and y, The path will look like this:

  1. Move to (M) / Line to (L) / Horizontal line (H) to x - r, y
  2. Quadratic Bezier (Q) to x, y + r via x, y
  3. Line to (L) / Vertical line (V) to the next point

For example, if the radius is 20 and the corner is in the point 100,100 the path will be H 80,100 Q 100,100 100,120 V ...

Upvotes: 1

Michael Rovinsky
Michael Rovinsky

Reputation: 7210

Done with Quadratic Bezier path:

svg {
  background-color: #aaa;
}
<svg width="300" height="180">
  <g transform="translate(10,10)">
    <path d="M 60,0 H 180 Q 190,0 190,10 V 140 Q 190,150 180,150 H 10 Q 0,150 0,140 V 60 Q 0,0 60,0 Z" fill="#d6d6d6"/>
  </g>
</svg>

Upvotes: 2

Related Questions