📐 🏦 🥋 एसवीजी प्रारूप में चित्र। भाग 4. - ड्राफ्ट मानक 👩🏾‍🏭 👩🏿‍🔬 🌙

" एसवीजी प्रारूप में चित्र। भाग 3 - ड्राफ्ट मानक " में, छायांकन क्षेत्रों का एक उदाहरण और सीएडी सिस्टम से विभिन्न सामग्रियों के लिए हैचिंग पैटर्न के उदाहरण दिए गए हैं। अगली कड़ी में, ड्राइंग आयामों पर विचार करें।

आरेखण आकार।

हम सभी आकार के तत्वों को एक ब्लॉक में जोड़ते हैं।

<g class="DimL"> <line class="lt2" x1="310" y1="0" x2="585" y2="0"/> <line class="lt2" x1="500" y1="325" x2="585" y2="325"/> <line class="lt2" x1="585" y1="0" x2="585" y2="325" marker-start="url(#DimPoint1)" marker-end="url(#DimPoint2)"/> <text x="578" y="162" font-size="28" text-anchor="middle" transform="rotate(-90, 578, 162)">325</text> </g>

तीर, सेरिफ़ और अंक बनाने के लिए, मार्कर टैग का उपयोग करें और उनके टेम्पलेट बनाएं:

एसवीजी प्रारूप में टेम्पलेट कोड

 <!--     - DimPoint --> <!--   ( ) --> <marker id="DimPoint1" viewBox="-2 -12 29 24" markerWidth="44" markerHeight="36" orient="auto"> <path class="lt2_025" stroke="black" d="M0,0 L20,-4 16,0 20,4 z M0,-10 L0,10 M0,0 L27,0"/> </marker> <!--   ( ) --> <marker id="DimPoint2" viewBox="-27 -12 29 24" markerWidth="44" markerHeight="36" orient="auto"> <path class="lt2_025" stroke="black" d="M0,0 L-20,-4 -16,0 -20,4 z M0,-10 L0,10 M0,0 L-27,0"/> </marker> <!--  --> <marker id="DimPoint3" viewBox="-10 -10 20 20" markerWidth="24" markerHeight="24" orient="auto"> <path stroke="black" stroke-width="2" d="M-6,6 L6,-6"/> <path stroke="black" d="M0,-10 L0,10 M-10,0 L10,0"/> </marker> <!--   --> <marker id="DimPoint4" viewBox="-10 -10 20 20" markerWidth="24" markerHeight="24"> <circle stroke="black" cx="0" cy="0" r="3"/> <path stroke="black" d="M0,-10 L0,10 M-10,0 L10,0"/> </marker> <!--    --> <marker id="DimPoint5" viewBox="0 -10 20 20" markerWidth="24" markerHeight="24" orient="auto"> <path stroke="black" d="M0,0 L20,-4 20,4 z"/> </marker> <!--    --> <marker id="DimPoint6" viewBox="-20 -10 20 20" markerWidth="24" markerHeight="24" orient="auto"> <path stroke="black" d="M0,0 L-20,-4 -20,4 z"/> </marker> <!--    --> <marker id="DimPoint7" viewBox="0 -10 20 20" markerWidth="24" markerHeight="24" orient="auto"> <path stroke="black" d="M0,0 L20,-4 M0,0 20,4"/> </marker> <!--    --> <marker id="DimPoint8" viewBox="-20 -10 20 20" markerWidth="24" markerHeight="24" orient="auto"> <path stroke="black" d="M0,0 L-20,-4 M0,0 -20,4"/> </marker> <!--   90  --> <marker id="DimPoint9" viewBox="0 -10 10 20" markerWidth="24" markerHeight="24" orient="auto"> <path stroke="black" d="M0,0 L10,-10 M0,0 10,10"/> </marker> <!--   90  --> <marker id="DimPoint10" viewBox="-10 -10 10 20" markerWidth="12" markerHeight="24" orient="auto"> <path stroke="black" d="M0,0 L-10,-10 M0,0 -10,10"/> </marker> <!--  --> <marker id="DimPoint11" viewBox="-10 -10 20 20" markerWidth="20" markerHeight="20"> <circle stroke="black" cx="0" cy="0" r="8"/> </marker> <!--   --> <marker id="DimPoint12" viewBox="-10 -10 20 20" markerWidth="20" markerHeight="20"> <circle stroke="black" cx="0" cy="0" r="5"/> </marker>

ऊपर के उदाहरण में, आकार के तीर अंदर हैं, बाहर ड्राइंग के लिए हम मार्कर-स्टार्ट और मार्कर-एंड गुणों के मूल्यों को अपने बीच बदलते हैं।

 <line class="lt2" x1="585" y1="0" x2="585" y2="325" marker-start="url(#DimPoint2)" marker-end="url(#DimPoint1)"/>

पहली विधि में, आपको प्रत्येक स्केल के लिए अपना स्वयं का तीर टेम्प्लेट बनाना होगा।
आकार कोड का दूसरा संस्करण इस तरह दिखता है:

SVG प्रारूप विकल्प 2 में टेम्पलेट कोड

 <!--     - DimPoint --> <!--  2 --> <!--   ( ) --> <marker id="DimP1" viewBox="-2 -12 29 24" markerWidth="8" markerHeight="6" orient="auto"> <path class="lt2_025" stroke="black" d="M0,0 L20,-4 16,0 20,4 z M0,-10 L0,10 M0,0 L27,0"/> </marker> <!--   ( ) --> <marker id="DimP2" viewBox="-27 -12 29 24" markerWidth="8" markerHeight="6" orient="auto"> <path class="lt2_025" stroke="black" d="M0,0 L-20,-4 -16,0 -20,4 z M0,-10 L0,10 M0,0 L-27,0"/> </marker>

पहले विकल्प से टेम्प्लेट कोड मार्कर और मार्करहाइट गुण के परिवर्तित मानों में भिन्न होता है। उनका मान 1: 1 के पैमाने पर ड्राइंग के लिए चुना जाता है।
दूसरा आकार कोड विकल्प

 <g class="DimL"> <line class="lt2" x1="190" y1="180" x2="190" y2="230"/> <line class="lt2" x1="310" y1="180" x2="310" y2="230"/> <line class="lt2" x1="190" y1="230" x2="310" y2="230"/> <path stroke-width="4" d="M190,230L310,230" marker-start="url(#DimP1)" marker-end="url(#DimP2)"/> <text x="265" y="222" font-size="28" text-anchor="middle">120</text> </g>

स्ट्रोक-चौड़ाई गुण मान एक बिंदु (मार्कर) खींचने के नियमों के अनुसार निर्धारित किए जाते हैं।
एसवीजी प्रारूप में आलेख देखें । भाग 2 - ड्राफ्ट मानक (अद्यतन)

विस्तार शेल्फ के साथ व्यास के आकार का उदाहरण

 <g class="DimD"> <line class="lt2" x1="152.51" y1="50.94" x2="347.49" y2="-50.94"/> <path stroke-width="4" d="M152.51,50.94L347.49,-50.94" marker-start="url(#DimP1)" marker-end="url(#DimP2)"/> <path class="lt2" d="M152.51,50.94L0,130.63h-50"/> <text x="-50" y="122" font-size="28"> <tspan>∅</tspan>220</text> </g>

पाठ।
ब्राउज़रों में, सभी सुविधाएँ अब पाठ स्वरूपण के लिए लागू नहीं की जाती हैं। पाठ को पाठ टैग के साथ प्रदर्शित किया जाता है। हम अपने स्वयं के गुणों के साथ पाठ अंशों के लिए tspan टैग के साथ आवेषण का उपयोग भी करते हैं (पिछले कोड उदाहरण देखें)।
28 मनमानी इकाइयों के फ़ॉन्ट-आकार की संपत्ति का मूल्य 1: 4 के पैमाने के लिए 5 मिमी के ड्राइंग में फ़ॉन्ट आकार से मेल खाता है।

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

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

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

More articles: