SVG - 带有左圆角的矩形

Question

您可以在下面看到生成路径的代码（带有右圆角的矩形）。我应该改变什么来准备相同或通用的函数，以便有可能按需对左角进行圆角处理？

function rightRoundedRect(x, y, width, height, radius) {
  return "M" + x + "," + y
       + "h" + (width - radius)
       + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + radius
       + "v" + (height - 2 * radius)
       + "a" + radius + "," + radius + " 0 0 1 " + -radius + "," + radius
       + "h" + (radius - width)
       + "z";
}

链接到创建的带有可视化的 CodePen 示例：https ://codepen.io/ajv/pen/wKdrWb

Answer 1

执行左侧操作的等效函数如下所示：

\n\n

function leftRoundedRect(x, y, width, height, radius) {\n  return "M" + (x + radius) + "," + y\n       + "h" + (width - radius)\n       + "v" + height\n       + "h" + (radius - width)\n       + "a" + radius + "," + radius + " 0 0 1 " + (-radius) + "," + (-radius)\n       + "v" + (2 * radius - height)\n       + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + (-radius)\n       + "z";\n}\n

\n\n

如果需要的话，我会让你合并它们。

\n\n

\r\n

\r\n

function leftRoundedRect(x, y, width, height, radius) {\n  return "M" + (x + radius) + "," + y\n       + "h" + (width - radius)\n       + "v" + height\n       + "h" + (radius - width)\n       + "a" + radius + "," + radius + " 0 0 1 " + (-radius) + "," + (-radius)\n       + "v" + (2 * radius - height)\n       + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + (-radius)\n       + "z";\n}\n

\r\n

var svg = d3.select("body").append("svg")\r\n    .attr("width", 960)\r\n    .attr("height", 500)\r\n  .append("g")\r\n    .attr("transform", "translate(480,250)");\r\nvar rect = svg.append("path")\r\n    //.attr("d", rightRoundedRect(-240, -120, 480, 240, 20));\r\n    .attr("d", leftRoundedRect(-240, -120, 480, 240, 20));\r\n\r\n// Returns path data for a rectangle with rounded right corners.\r\n// Note: it\xe2\x80\x99s probably easier to use a <rect> element with rx and ry attributes!\r\n// The top-left corner is \xe2\x9f\xa8x,y\xe2\x9f\xa9.\r\nfunction rightRoundedRect(x, y, width, height, radius) {\r\n  return "M" + x + "," + y\r\n       + "h" + (width - radius)\r\n       + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + radius\r\n       + "v" + (height - 2 * radius)\r\n       + "a" + radius + "," + radius + " 0 0 1 " + -radius + "," + radius\r\n       + "h" + (radius - width)\r\n       + "z";\r\n}\r\n\r\nfunction leftRoundedRect(x, y, width, height, radius) {\r\n  return "M" + (x + radius) + "," + y\r\n       + "h" + (width - radius)\r\n       + "v" + height\r\n       + "h" + (radius - width)\r\n       + "a" + radius + "," + radius + " 0 0 1 " + (-radius) + "," + (-radius)\r\n       + "v" + (2 * radius - height)\r\n       + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + (-radius)\r\n       + "z";\r\n}

\r\n

body {\r\n  margin: auto;\r\n  width: 960px;\r\n  background-color: tomato;\r\n}\r\npath {\r\n  fill: #222;\r\n  stroke: #fef;\r\n  stroke-width: 1.5px;\r\n}

\r\n

\r\n

\r\n

\n