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> 

है मैं आयत एक गोल आकार के शीर्ष कोने देना चाहते हैं। यह कैसे संभव है?
मैं सीमा-त्रिज्या संपत्ति लागू करने में सक्षम नहीं हूं।

Answer 1

Robert Longson द्वारा टिप्पणी के अनुसार आपको गोलाकार कोनों को नियंत्रित करने के लिए अपने रेक्ट तत्व को 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>

Answer 2

उपयोग के साथ <path> तत्व:

निम्न उदाहरण में, मैं एक cubic bezier curveQ कमांड के साथ ऊपरी बाएँ गोल कोने (d विशेषता में Q1 1 5 1) बनाने के लिए इस्तेमाल 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>