svg - Border radius in SVG d3

Question

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:

But I want like this:

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

标签： svgd3.js

Answer 1

完成二次贝塞尔路径：

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>