भरी आकृति बदलकर SVG पाथ के कोने गोल करें

SVG पाथ का भरा कोना गोल करने के लिए पाथ ज्यामिति बदलें। दोनों जुड़ती सीधी रेखाएँ शीर्ष से पहले रोकें, फिर नए सिरों को वक्र से जोड़ें। stroke-linejoin="round" जोड़ पर रंगा स्ट्रोक बदलता है; मूल भरी रूपरेखा वही रहती है।

ट्यूटोरियल मूल भरे चिह्न का एक समकोण गोल करता है। साधारण टेक्स्ट एडिटर और ब्राउज़र चाहिए। अंत में 20-इकाई गोल फ़िलेट वाला पूरा SVG, चुनी त्रिज्या फिट होने की जाँच और तुलना या वापसी का मूल कोणीय फ़ाइल होगा।

फ़िलेट वक्र है जो तीखा कोना हटाकर पास के किनारों को स्पर्शरेखीय रूप से मिलता है। उदाहरण क्षैतिज और लंबवत सीधी रेखाओं के बीच वृत्त का चौथाई चाप लेता है। मनमाने ट्रेस किए Bézier पाथ अपने आप गोल नहीं करता।

आर्टवर्क की ज़रूरत वाला बदलाव चुनें

stroke-linejoin संदर्भ पाथ कोनों पर स्ट्रोक ड्रॉ होना तय करता है। रंगी सीमा बदलनी हो तो गोल जोड़ लें। भरी सिलुएट बदलनी हो तो असली पाथ संपादित करें।

साधारण आयत में SVG rect संदर्भ rx और ry बताता है। हमारे चिह्न में तिरछा किनारा भी है, इसलिए गोल आयत बनाना चुने कोने से अधिक बदलेगा।

समस्या केवल स्ट्रोक की लंबी नोक हो तो माइटर नोक निदान से शुरू करें। यह लेख भरी ज्यामिति बदलता है।

मूल कोणीय फ़ाइल सहेजें

पूरा कोड emblem-original.svg में कॉपी करके ब्राउज़र खोलें। ऊपर-दायाँ शीर्ष (170, 30) है। आती रेखा क्षैतिज है; जाती रेखा नीचे (170, 100) तक है।

<svg xmlns="http://www.w3.org/2000/svg"
     width="200" height="190" viewBox="0 0 200 190">
  <path fill="#174f68"
        d="M30 30H170V100L110 160H30Z"/>
</svg>

इसे तुलना का मास्टर रखें। पाथ पर stroke="#df9d34", stroke-width="8" और stroke-linejoin="round" जोड़ने से रंगी सीमा गोल होती है, लेकिन गहरा फ़िल मूल तीखे कोने तक रहता है।

उस कोने को 20-इकाई चाप से बदलें

आती रेखा का अंत शीर्ष से 20 इकाई बाएँ (150, 30) करें। जाती रेखा की शुरुआत 20 इकाई नीचे (170, 50) करें। (150, 50) केंद्र और 20 त्रिज्या का वृत्त इन बिंदुओं को चौथाई चाप से जोड़ता है।

दूसरी पूरी फ़ाइल emblem-rounded.svg सहेजें:

<svg xmlns="http://www.w3.org/2000/svg"
     width="200" height="190" viewBox="0 0 200 190">
  <path fill="#174f68"
        d="M30 30H150A20 20 0 0 1 170 50V100L110 160H30Z"/>
</svg>

A20 20 0 0 1 170 50 का मतलब क्षैतिज और लंबवत त्रिज्या 20, शून्य घुमाव, छोटा चाप, sweep flag 1 और अंत (170, 50) है। SVG पाथ विनिर्देश पैरामीटर बताता है। इस दक्षिणावर्त कोने में इच्छित चौथाई वृत्त बनता है। arc-flags गाइड गलत दिशा मुड़े चाप का कारण बताती है।

वृत्त की त्रिज्या पहले सिरे पर लंबवत और दूसरे पर क्षैतिज है। इसलिए स्पर्शरेखा क्षैतिज आती और लंबवत जाती रेखा के साथ मिलती है। वक्र गोल दिखकर भी जोड़ पर मोड़ बना सकता है; यह निर्माण इन्हीं किनारों की स्पर्श दिशाएँ मिलाता है।

जाँचें कि त्रिज्या किनारों में फिट है

90-डिग्री कोने पर गोल फ़िलेट हर पास की रेखा में त्रिज्या जितनी दूरी लेता है। आती रेखा 140 इकाई, लेकिन जाती केवल 70 है। इस एक कोने में धनात्मक त्रिज्या अधिकतम 70 हो; जाती रेखा का सीधा हिस्सा रखना हो तो छोटी चुनें।

अगला फ़ंक्शन जानबूझकर इसी चिह्न और कोने तक सीमित है। बदला d निकालने के लिए JavaScript console या Node.js में चलाएँ।

function roundEmblemCorner(radius) {
  const incomingLength = 170 - 30;
  const outgoingLength = 100 - 30;
  if (!Number.isFinite(radius) || radius <= 0 ||
      radius > Math.min(incomingLength, outgoingLength)) {
    throw new Error('Radius must be positive and fit both adjacent edges.');
  }
  return `M30 30H${170 - radius}` +
    `A${radius} ${radius} 0 0 1 170 ${30 + radius}` +
    'V100L110 160H30Z';
}
 
roundEmblemCorner(20);
// M30 30H150A20 20 0 0 1 170 50V100L110 160H30Z

त्रिज्या 80 में साधारण निर्माण चाप (170, 110) पर खत्म करेगा, अगले शीर्ष (170, 100) से आगे। अगला V100 उलटी दिशा जाएगा। ब्राउज़र जो भी दिखाए स्वीकारने के बजाय वह त्रिज्या नकारें।

अन्य सीधी-रेखा कोणों में स्पर्श दूरी कोण पर निर्भर है। साधारण उत्तल कोने के अंदरूनी कोण θ पर दूरी r / tan(θ / 2) है। साझा किनारे के दोनों सिरे गोल करें तो दोनों खपत दूरी उसमें साथ फिट हों। अवतल कोने, पुराने वक्र और कंपाउंड आकृतियों को अतिरिक्त ज्यामिति निर्णय चाहिए; फ़ंक्शन उन्हें नहीं संभालता।

बदली सिलुएट जाँचें और स्रोत रखें

1. दोनों पूरे SVG समान आकार और बैकग्राउंड पर खोलें।
2. रंगे-जोड़ वाले रूप का स्ट्रोक अस्थायी हटाएँ। फ़िल कोणीय मूल से मिले।
3. गोल रूप का ऊपर-दायाँ कंटूर मिलाएँ। बाकी किनारे, तिरछी रेखा और स्थिति मूल जैसी हों।
4. त्रिज्या जाँच 20 और फिर 80 से चलाएँ। पहला दिखाया पाथ देता, दूसरा त्रिज्या त्रुटि।
5. वास्तविक उपयोग गंतव्य में सहेजा SVG देखें। गोलाई जानबूझकर विवरण हटाए या गंतव्य रूप बदले तो मूल लौटाएँ।

विधि टिप्पणी: हमने मूल, गोल-स्ट्रोक और फ़िलेट पाथ Chromium में रेंडर किए। (169, 31) का फ़िल नमूना पहले दो के भीतर और फ़िलेट के बाहर था। ऊपर के ठीक फ़ंक्शन ने 20 स्वीकारा, 80 नकारा। दोनों चाप सिरों को त्रिज्या और पास की स्पर्श दिशा से भी मिलाया। यह दिया सीधी-रेखा उदाहरण जाँचता है, सामान्य फ़िलेट एल्गोरिदम या कटर आउटपुट नहीं।

वक्र बाहर उभरे तो चाप सिरा और sweep flag देखें। मोड़ बचे तो पड़ोसी खंड से स्पर्शरेखा मिलाएँ; Bézier मुलायम-जोड़ गाइड अलग सुधार समझाती है। SVG संपादन गाइड खोलना, जाँचना और उपयोगी मास्टर रखना बताती है।

कोना संपादन से पहले PerfectVector कहाँ उपयोगी है

आर्टवर्क केवल रास्टर हो तो PerfectVector पाथ वापस दे सकता है। पहले मिली रूपरेखा देखें, फिर कॉपी में कौन कोना बदलना है तय करें। इमेज-टू-वेक्टर कार्यप्रवाह रिकवरी चरण है; अपने आप यह फ़िलेट नहीं लगाता।

मूल वेक्टर उपलब्ध हो तो वही लें। ट्रेस कंटूर में Bézier और छोटी अनियमितताएँ हो सकती हैं जो इस सीधे उदाहरण से अलग हैं। हर ट्रेस जोड़ गोल करने से सरल चिह्न फिर बनाना आसान हो सकता है। जानबूझकर नया डिज़ाइन करने से पहले स्वीकृत आकृति रखें और अगली डिलीवरी जाँच के लिए ब्लॉग कार्यप्रवाह गाइडें लें।

अक्सर पूछे जाने वाले सवाल

गोल स्ट्रोक जोड़ के बाद फ़िल कोना तीखा क्यों?

जोड़ पाथ के आसपास रंगा स्ट्रोक बदलता है। फ़िल पुरानी ज्यामिति का अनुसरण करता है और वक्र से बदलने तक मूल कोना रखता है।

क्या फ़ंक्शन किसी SVG पाथ पर ले सकता हूँ?

नहीं। दिखे सीधे चिह्न का एक तय समकोण संभालता है। दूसरे कोण, अवतल कोने, वक्र और साझा किनारे सीमाएँ अपना निर्माण माँगते हैं।

क्या इससे फ़ाइल कटिंग के लिए तैयार होगी?

यह उदाहरण की एक भरी रूपरेखा बदलता है। सहेजी ज्यामिति और वास्तविक कटर या उत्पादन प्रक्रिया की जाँच करें; ब्राउज़र परीक्षण भौतिक कट परिणाम नहीं देता।

स्रोत

1. MDN — SVG stroke-linejoin — तुलना में फ़िल ज्यामिति से अलग स्ट्रोक रंगाई सेटिंग।
2. MDN — SVG rect — सामान्य आयत के सरल त्रिज्या नियंत्रण।
3. W3C — SVG अंडाकार चाप कमांड — पूरे गोल पाथ के चाप त्रिज्या, flag और अंत।

मूल पाथ न हों तो PerfectVector से आर्टवर्क वापस पाएँ। रूपरेखा संदर्भ से मिलाएँ, मिला मास्टर सहेजें और इच्छित आकार पर अलग कॉपी में जानबूझकर कोना बदलाव जाँचें।