圆角仅在 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 属性。

原文由 Dhanya 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您也可以使用 clipPath 。这有点像 hack，但可能更容易实施。

假设如下：

• 你的 rect 是 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 情况下 + –1。

这样你就不会用 clipPath 矩形的底部。

原文由 borracciaBlu 发布，翻译遵循 CC BY-SA 4.0 许可协议