仅在svg< rect>一侧的圆角 [英] Rounded corner only on one side of svg <rect>

问题描述

我试图实现一个像图一样的条形图。我有以下的HTML元素

 < rect x =35y = -  135width =10height =51style =stroke：rgb（255,255,255）; opacity：0.8; fill：rgb（255，122，0）;>< / rect> 
  

我想给矩形顶部的角设置圆形。
怎么可能？

我无法应用border-radius属性。

解决方案

正如 Robert Longson 所评论的那样，您需要将您的rect元素转换为路径元素来控制圆角。

在下面的例子中，我使用了立方贝塞尔曲线与 Q 命令做出左上角的圆角（ Q1在 d 属性中的1 5 1 ）：

  svg {height：90vh;宽度：汽车; }  

< svg viewbox =0 0 10 50 > < path d =M1 49 V5 Q1 1 5 1 H9 V49zfill =rgba（255，122，0，0.8）/>< / svg>

I am trying to implement a bar chart like diagram. I have the following html element

<rect x="35" y="-135" width="10" height="51" style="stroke: rgb(255, 255, 255); opacity: 0.8; fill: rgb(255, 122, 0);"></rect>

I want to give the top corner of the rectangle a rounded shape. How is it possible?
I am not able to apply border-radius property.

解决方案

As commented by Robert Longson you need to convert your rect element to a path element to control the rounded corners.

In the following example, I used a cubic bezier curve with the Q command to make the top left rounded corner (Q1 1 5 1 in the d attribute):

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>

这篇关于仅在svg< rect>一侧的圆角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！