我试图实现一个像图一样的条形图。我有以下的HTML元素仅在svg的一侧有一个圆角<rect>
<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属性。
我试图实现一个像图一样的条形图。我有以下的HTML元素仅在svg的一侧有一个圆角<rect>
<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您需要将您的矩形元素转换为path element来控制圆角。
在以下示例中,我使用的cubic bezier curve与Q
命令使左上圆角(Q1 1 5 1
在d
属性):
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, 122, 0, 0.8)" />
</svg>
使用贝塞尔曲线是不正确的。贝塞尔曲线只能接近一个圆。您需要使用'arc'命令:http://devdocs.io/svg/attribute/d#arcto – adius
使用<path>
元件与arc
命令(http://devdocs.io/svg/attribute/d#arcto)。
语法:a rx,ry x-axis-rotation large-arc-flag sweep-flag dx,dy
<svg width="200" height="200" viewBox="0 0 10 10">
<path d="M0,8 v-3 a5,5 0 0 1 5,-5 h3 v8 z" />
</svg>
你必须将其转换为路径,墙角有椭圆弧建模。 –