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

Question

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

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

Answer 1

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

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 देखें ।

Comments

हम केवल मूल तत्व के शीर्ष पर स्ट्रोक कैसे दिखा सकते हैं?

— सुरेश

क्या आप बता सकते हैं कि कुछ पदों में कुछ संख्याएँ इस पर प्रभाव क्यों देती हैं?

— याकूब

@JacobIRR 'स्ट्रोक-डशरे' संपत्ति (उत्तर में जुड़ा हुआ) की परिभाषा को संदर्भित करता है। यहाँ विचार आयत के किनारों पर डैश की लंबाई से मेल खाने के लिए है, और उस किनारे के साथ डैश अंतराल है जिसमें कोई स्ट्रोक नहीं होना चाहिए।

— एरिक डहलस्ट्रम

मैंने अभी आपके समाधान को अपडेट किया है, इस लिंक में codepen.io/shaswatatripathy/pen/oNgPpyd

— ट्रिपथी

यहाँ एक प्रोग्रामेटिक सॉल्यूशन stroke-dasharrayदिया गया है जो एक ऑब्जेक्ट को परिभाषित करता है जो सीमाओं को दर्शाता है। कोड को पढ़ने से आपको यह समझने में मदद मिल सकती है कि यह कैसे काम करता है: codepen.io/lazd/pen/WNweNwy?editors=1010

— lazd

Answer 2

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

विशेष रूप से इस मामले के लिए, एक तत्व <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/

अधिक जानकारी के लिए, <polyline>और अधिक शक्तिशाली-लेकिन-अधिक-भ्रमित <path>आकारों के बारे में पढ़ें ।

Answer 3

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