我正在尝试实现类似图表的条形图。我有以下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来控制圆角。
在下面的例子中,我使用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>
你也可以使用clipPath
。这是一种黑客攻击,但它可能更容易实现。
假设如下:
width="10"
height="51"
rx="5"
和ry="5"
<svg>
<defs>
<clipPath id="round-corner">
<rect x="0" y="0" width="10" height="56" rx="5" ry="5"/>
</clipPath>
</defs>
<!-- if you want to use x="35" y="-135" put clip-path on a `g` element -->
<rect width="10"
height="51"
clip-path="url(#round-corner)"
style="stroke: rgb(255, 255, 255); opacity: 0.8; fill: rgb(255, 122, 0);"></rect>
</svg>
一些说明:
因此,clipPath > rect > width
与你的rect
完全相同。
相反,对于clipPath > rect > height
,你必须考虑顶部的角半径,因此高度应该是rect.height
+ desired-corner-radius
(在这种情况下51px + 5px)。
这样你就不会用clipPath
触摸你的矩形的底部。
将<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>
写了一篇解释这个https://medium.com/@dphilip/one-side-rounded-rectangle-using-svg-fb31cf318d90的文章
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path
d="M10,40
h50
q5,0 5,5
v10
q0,5 -5,5
h-50
z
"
fill="#4EDFA5"
>
<svg>