Question

我正在尝试使用js svg库制作仅具有左上角圆角的矩形。我在文档中找到了这个示例：

script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@latest/dist/svg.min.js"></script>
<script>
    var draw = SVG().addTo('#graphix').size(300, 300);
    var rect = draw.rect(300, 300).attr({ fill: '#f06' });
    rect.radius(100);
   
    //rect

  //end
</script>

将所有角都圆化。使用此库只可以舍入左上角或右上角吗？或者我应该使用什么作为替代品？我确实无法在与我的帖子相关的上一个问题中得到它。解决方案根本行不通。我尝试使用问题的一些示例，在此svg / d3.js rounded corner on one corner of a rectangle的矩形的一个角上是圆角，但是这些示例是对整个右侧进行圆角处理，而不是仅对一个角（例如右上/左上）进行处理。对我来说主要的问题是我在不同的拐角处具有不同的半径。

Answer 1

您可以将div代替SVG，然后使用border-radius对其进行四舍五入。

<div style='width:100px;height:100px;background-color:red;border:1px solid black;border-top-left-radius:15px;border-top-right-radius:15px;'></div>

您只需更改添加的数字即可更改边框半径，背景颜色，宽度，高度等。

左上角的圆形

1 个答案: