एसवीजी क्षैतिज घुंघराले-ब्रैकेट

Question

मैं कुंजीपटल चरित्र से शुरू होने और इसे बदलने के लिए एक विस्तृत क्षैतिज घुंघराले-ब्रैकेट बनाने की कोशिश कर रहा हूं।

मैंने शुरू के साथ:

<text x="40" y="120" transform="rotate(90, 40, 120)">}</text> 

अब मैं इसे व्यापक बनाने के लिए पाठ खिंचाव करना चाहते हैं। सीएसएस font-size तत्व का उपयोग करने के बारे में भूल जाओ, वसा प्रतीक का उत्पादन करके तदनुसार फ़ॉन्ट-वेट भी बदल जाएगा।

मैं इसे पतला रखकर चरित्र को खींचना चाहता हूं।

मैं तो जैसा कि मैंने पिछले करने की कोशिश की है symbol और use संयोजन का उपयोग कर, viewbox क्षमता

यहाँ का लाभ लेने के लिए प्रयास करने के लिए शुरू कर दिया:

<symbol id="curly-bracket"> 
    <text>}</text> 
</symbol> 
<use x="40" y="120" transform="rotate(90, 40, 120)" xlink:href="#curly-bracket" /> 

चरित्र अब कटा हुआ दिखाई देता है और मैं कोई इसे सही तरीके से प्रदर्शित करने का तरीका।

मुझे यह समझने में कठिनाई हो रही है कि मैं क्या कर रहा हूं, W3 SVG doc पढ़ रहा हूं।

Answer 1

<text x="40" y="120" transform="rotate(90, 40, 120) scale(1,2)">}</text> 

बस इतना ही y निर्देशांक दोगुना होगा, और जब से तुम यह 90 डिग्री कर दिया गया है, यह क्षैतिज खिंचाव जाएगा।

डब्ल्यू 3 स्पेक से एसवीजी सीखने का प्रयास आपको निराश और उलझन में छोड़ने जा रहा है। इसे इसका उपयोग करने के तरीके पर ट्यूटोरियल के रूप में नहीं लिखा गया है। Here's a great resource on SVG transforms। यदि आप वास्तव में एसवीजी में रूचि रखते हैं तो मैं उस संपूर्ण ई-बुक को पढ़ने की अनुशंसा करता हूं। मुझे लगता है कि यह वहां का सबसे अच्छा संसाधन है।