僅在svg的一側有一個圓角<rect>

我試圖實現一個像圖一樣的條形圖。我有以下的HTML元素僅在svg的一側有一個圓角<rect>

<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屬性。

2016-01-21 Dhanya

你必須將其轉換爲路徑，牆角有橢圓弧建模。 –

如評論Robert Longson您需要將您的矩形元素轉換爲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>

2016-01-21 13:23:14

使用貝塞爾曲線是不正確的。貝塞爾曲線只能接近一個圓。您需要使用'arc'命令：http：//devdocs.io/svg/attribute/d#arcto – adius

使用<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>

2018-01-10 14:04:16 adius

回答