एसवीजी प्रारूप में चित्र। भाग 3. - ड्राफ्ट मानक

" एसवीजी प्रारूप में चित्र। भाग 2 - मानक का मसौदा " में, सीएडी सिस्टम से सरल ग्राफिक वस्तुओं को खींचने का एक उदाहरण दिया गया है। अगली कड़ी में, विभिन्न सामग्रियों के लिए ड्राइंग हैचिंग पर विचार करें।

अंडे सेने।
पैटर्न टैग का उपयोग करके ड्राइंग के डिफ भाग में एक हैच पैटर्न खींचें।
45 ° के कोण पर धातु से हैचिंग के लिए टेम्प्लेट (टाइप 0)

<pattern id="hatch0_45" width="20" height="20" patternUnits="userSpaceOnUse"> <line class="lt2_025 " x1="1" y1="20" x2="20" y2="1" /> <line class="lt2_025 " x1="0" y1="1" x2="1" y2="0" /> </pattern> 

कई लोग नोटिस करेंगे और सवाल पूछेंगे: - निर्देशांक X1 = "0" y1 = "20" x2 = "20" y2 = "0" के साथ एक के बजाय दो लाइनें क्यों खींची जाती हैं?
टेम्पलेट में एक पंक्ति के साथ हैचिंग उदाहरण

यदि आप बारीकी से देखते हैं, तो हम हैचिंग लाइन में अंतराल देखेंगे।
एक पैटर्न में दो लाइनों के साथ हैचिंग उदाहरण

दो लाइनों के साथ ऐसे अंतराल नहीं हैं।

45 ° के कोण पर धातु के प्रकार से छायांकित क्षेत्र का कोड टुकड़ा

 <path d="M475,225 L475,325 L500,325 L500,225 Z" fill="url(#hatch1_45)"/> 

30 डिग्री के कोण पर धातु से हैचिंग के लिए टेम्प्लेट (टाइप 0)

 <pattern id="hatch1_30" width="34" height="20" patternUnits="userSpaceOnUse"> <line class="lt2_025 " x1="2" y1="20" x2="34" y2="1" /> <line class="lt2_025 " x1="-1" y1="2" x2="3" y2="-1" /> </pattern> 

अन्य सामग्री के हैचिंग उदाहरण

45 ° के कोण पर नॉन-मेटल हैचिंग टेम्प्लेट (टाइप 1)

 <pattern id="hatch2_45" width="34" height="20" patternUnits="userSpaceOnUse"> <line class="lt2_025 " x1="0" y1="20" x2="20" y2="0" /> <line class="lt2_025 " x1="0" y1="0" x2="20" y2="20" /> </pattern> 

एक पेड़ (टाइप 2) के लिए एक टेम्पलेट, इस मामले में, प्रत्येक हैचिंग क्षेत्र के लिए, आपको अपना स्वयं का टेम्पलेट बनाने की आवश्यकता है। अब तक, मैंने एक और विकल्प नहीं निकाला है कि कैसे हलकों को आकर्षित किया जाए और टेम्पलेट का आकार छायांकन क्षेत्र से बड़ा हो। शायद कोई बेहतर समाधान लेकर आएगा।

 <pattern id="hatch2_45" width="350" height="350" patternUnits="userSpaceOnUse"> <circle class="lt2_025" cx="0" cy="0" r="180" fill="none"/> <circle class="lt2_025" cx="0" cy="0" r="200" fill="none"/> <circle class="lt2_025" cx="0" cy="0" r="220" fill="none"/> <circle class="lt2_025" cx="0" cy="0" r="240" fill="none"/> <circle class="lt2_025" cx="0" cy="0" r="260" fill="none"/> <circle class="lt2_025" cx="0" cy="0" r="280" fill="none"/> <circle class="lt2_025" cx="0" cy="0" r="300" fill="none"/> <circle class="lt2_025" cx="0" cy="0" r="320" fill="none"/> </pattern> 

45 ° के कोण पर प्राकृतिक पत्थर (3 प्रकार) को रचने के लिए पैटर्न

 <pattern id="hatch3_45" width="20" height="20" patternUnits="userSpaceOnUse"> <line class="lt2_025 " x1="0" y1="20" x2="12" y2="8" /> </pattern> 

सिरेमिक हैचिंग पैटर्न (टाइप 4) 45 ° पर

 <pattern id="hatch4_45" width="20" height="20" patternUnits="userSpaceOnUse"> <line class="lt2_025 " x1="0" y1="16" x2="16" y2="0" /> <line class="lt2_025 " x1="4" y1="20" x2="20" y2="4" /> <line class="lt2_025 " x1="0" y1="4" x2="4" y2="0" /> <line class="lt2_025 " x1="16" y1="20" x2="20" y2="16" /> </pattern> 

45 डिग्री पर कंक्रीट हैचिंग पैटर्न (टाइप 5)

 <pattern id="hatch5_45" width="20" height="20" patternUnits="userSpaceOnUse"> <line class="lt2_025 " x1="0" y1="30" x2="6" y2="24" /> <line class="lt2_025 " x1="10" y1="20" x2="26" y2="4" /> </pattern> 

45 डिग्री के कोण पर ग्लास (टाइप 6) हैचिंग के लिए टेम्पलेट

 <pattern id="hatch5_45" width="30" height="30" patternUnits="userSpaceOnUse"> <line class="lt2_025 " x1="5" y1="15" x2="13" y2="7" /> <line class="lt2_025 " x1="5" y1="25" x2="25" y2="5" /> <line class="lt2_025 " x1="17" y1="23" x2="25" y2="15" /> </pattern> 

ऐसे मामलों में जहां गैर-हैट क्षेत्र होना आवश्यक है, आप इस समाधान को लागू कर सकते हैं।

 <path class="lt2" d="M0,575L0,600 15,675 100,650 250,675 300,575z"/> <path d="M0,575L0,600 15,675 100,650 250,675 300,575z" fill="url(#hatch0_45)"/> <circle class="lt2" cx="150" cy="625" r="40"/> <circle cx="150" cy="625" r="40" fill="white"/> 

सर्कल क्षेत्र छायांकित क्षेत्र पर सुपरिंपोज किया जाता है।


बाहरी सीएसएस फ़ाइल के साथ डेमो ड्राइंग

लेख का अद्यतन संस्करण