圆角仅在 svg 的一侧

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

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

假设如下：

• your rect is width="10" and height="51"
• 顶角将是rx="5" and 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>

一些注意事项：
So the clipPath > rect > width和你的一模一样rect.

而是为了clipPath > rect > height，你必须考虑顶部的圆角半径，因此高度应该是rect.height + desired-corner-radius（在本例中为 51 像素 + 5 像素）。

这样你就不会用clipPath.