我正在尝试实现类似图表的条形图.我有以下html元素
<rect x="35" y="-135" width="10" height="51" style="stroke: rgb(255,255,255); opacity: 0.8; fill: rgb(255,122,0);"></rect>
我想给矩形的顶角一个圆角形状.
这怎么可能？
我无法应用border-radius属性.
解决方法
如
Robert Longson所述,您需要将rect元素转换为
path element以控制圆角.
在下面的示例中,我使用带有Q命令的cubic bezier curve来创建左上角的圆角(d属性中的Q1 1 5 1)：
svg{
height:90vh;
width:auto;
}
<svg viewBox="0 0 10 50"> <path d="M1 49 V5 Q1 1 5 1 H9 V49z" fill="rgba(255,0.8)" /> </svg>
