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によってコメントされているように、丸い角を制御するには、rect要素をpath elementに変換する必要があります。

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>要素を持つ：

次の例では、私は（d属性でQ1 1 5 1）左上の丸いコーナーを作るためにQコマンドでcubic bezier curveを使用しました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

答えて