Ben şema gibi bir çubuk grafik uygulamaya çalışıyorum. Ben dikdörtgen yuvarlak şekil üst köşesini vermek istiyorum aşağıdaki html elemanınıYalnızca svg'nin bir tarafında yuvarlak köşe <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>
var. Bu nasıl mümkündür?
Sınır yarıçapı özelliğini uygulayamıyorum.
Robert Longson tarafından yorumlandığı gibi yuvarlatılmış köşeleri denetlemek için rect öğenizi path element'a dönüştürmeniz gerekir.
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>Bir bezier eğrisi kullanmak yanlıştır. Bir bezier eğrisi sadece bir çevreye yaklaşabilir. 'Arc' komutunu kullanmanız gerekir: http://devdocs.io/svg/attribute/d#arcto – adius
Kullanım <path> eleman ile:
Aşağıdaki örnekte, I (d özelliğinde Q1 1 5 1) Sol üst yuvarlatılmış köşe yapmak Q komutuyla cubic bezier curve kullanılan arc komutu (http://devdocs.io/svg/attribute/d#arcto).
dizimi: 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>
Sen bir yola dönüştürmek ve eliptik yaylar ile köşeleri modellemek gerekir. –