SVG d3中的边界半径

Question

我有以下的svg：

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

看上去像这样：

​

但我想这样：

​

​

​

​

​

​

​

​

我对svg曲线知之甚少。我怎么能像这样设置边界半径？

Answer 1

用二次Bezier路径完成：

​

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>

​

Answer 2

您可以在这里找到路径的详细描述：https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths

拐角处最简单的方法是二次Bezier路径。例如，如果您需要绕过半径近似为r的右上角，且该角的坐标为x和y，则路径如下所示：

y

• Quadratic Bezier (E 121qE 222)移动到E 123xe 224，<>E 125/代码>y+rE 226，y

1. Line to (E 133LE 234代码>/竖线(<>E<135/code>V代码>>>代码>><代码><>>代码><>>代码><>>238>。

例如，如果半径为20，拐角在点100,100，路径将是H 80,100 q 100, 100 ,120 V .