स्ट्रोक-चौड़ाई कैसे सेट करें: 1 एसवीजी आकार के केवल कुछ पक्षों पर?

Question

स्ट्रोक-चौड़ाई सेट करना: एसवीजी में <rect> तत्व पर 1 आयताकार के हर तरफ एक स्ट्रोक रखता है।

एसवीजी आयत के केवल तीन किनारों पर स्ट्रोक चौड़ाई कैसे रखता है?

Answer 1

आप एसवीजी में एक ही आकार के विभिन्न हिस्सों की दृश्य शैली को नहीं बदल सकते हैं (अनुपलब्ध अभी तक उपलब्ध Vector Effects मॉड्यूल)। इसके बजाय, आपको प्रत्येक स्ट्रोक या अन्य दृश्य शैली के लिए अलग-अलग आकार बनाने की आवश्यकता होगी, जिन्हें आप बदलना चाहते हैं।

विशेष रूप से इस मामले में, बजाय एक <rect> या <polygon> तत्व का उपयोग कर के लिए आप बना सकते हैं एक <path> या <polyline> कि केवल आयत के तीन तरफ को शामिल किया गया:

<!-- Move to 50,50 then draw a line to 150,50, to 150,150, and then to 50,150 --> 
<path d="M50,50 L150,50 150,150 50,150" /> 
<polyline points="50,50 150,50 150,150 50,150" /> 

आप यहाँ कार्रवाई में इन के प्रभाव को देख सकते हैं : http://jsfiddle.net/b5FrF/3/

अधिक जानकारी के लिए ०१२३२१३०५५७ के बारे में पढ़ाऔर अधिक शक्तिशाली-लेकिन-अधिक भ्रमित <path> आकार।

Answer 2

आप तीन स्ट्रोक किए गए पक्षों के लिए पॉलीलाइन का उपयोग कर सकते हैं, और केवल स्ट्रोक को आयत पर नहीं डाल सकते हैं। मुझे नहीं लगता कि एसवीजी आपको पथ/आकार के विभिन्न हिस्सों में विभिन्न स्ट्रोक लागू करने देता है, इसलिए आपको एक ही प्रभाव प्राप्त करने के लिए कई ऑब्जेक्ट्स का उपयोग करने की आवश्यकता है।

Answer 3

यदि आपको स्ट्रोक या नो स्ट्रोक की आवश्यकता है तो आप इसे करने के लिए stroke-dasharray का उपयोग कर सकते हैं, जिससे आयत के किनारों के साथ डैश और अंतराल मिलते हैं।

rect { fill: none; stroke: black; } 
 
.top { stroke-dasharray: 0,50,150 } 
 
.left { stroke-dasharray: 150,50 } 
 
.bottom { stroke-dasharray: 100,50 } 
 
.right { stroke-dasharray: 50,50,100 }

<svg height="300"> 
 
    <rect x="0.5" y="0.5" width="50" height="50" class="top"/> 
 
    <rect x="0.5" y="60.5" width="50" height="50" class="left"/> 
 
    <rect x="0.5" y="120.5" width="50" height="50" class="bottom"/> 
 
    <rect x="0.5" y="180.5" width="50" height="50" class="right"/> 
 
</svg>

jsfiddle देखें।