仅在svg <rect>的一侧有圆角

Question

我正在尝试实现类似图表的条形图.我有以下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属性.

Answer 1

写了一篇文章解释这个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>

Answer 2

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

在下面的示例中,我使用带有命令的三次贝塞尔曲线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>

Answer 3

将<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>

Answer 4

您也可以使用clipPath。这是一种hack，但是可能更容易实现。

假设如下：

• 你的直肠是 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。