วิธีตั้งค่าความกว้างเส้นโครงร่าง: 1 เฉพาะบางด้านของรูปร่าง SVG

การตั้งค่าความกว้างเส้นโครงร่าง: 1 บน a <rect>องค์ประกอบใน SVG จะวางเส้นขีดไว้ที่ทุกด้านของสี่เหลี่ยม

หนึ่งจะวางความกว้างเส้นขีดเพียงสามด้านของสี่เหลี่ยมผืนผ้า SVG ได้อย่างไร?

หากคุณต้องการจังหวะหรือไม่มีจังหวะคุณสามารถใช้สโตรก - ดาชาร์เรย์เพื่อทำสิ่งนี้ได้โดยทำให้ขีดกลางและช่องว่างตรงกันกับด้านข้างของสี่เหลี่ยม

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

คุณไม่สามารถเปลี่ยนลักษณะภาพของส่วนต่างๆของรูปร่างเดียวใน SVG (ไม่มีเอฟเฟกต์เวกเตอร์ที่ยังไม่พร้อมใช้งานโมดูล ) แต่คุณจะต้องสร้างรูปร่างแยกกันสำหรับแต่ละจังหวะหรือสไตล์ภาพอื่น ๆ ที่คุณต้องการให้แตกต่างกันไป

โดยเฉพาะสำหรับกรณีนี้แทนที่จะใช้ a <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>กว่า

คุณสามารถใช้เส้นโพลีไลน์สำหรับด้านที่ถูกลูบทั้งสามด้านและอย่าวางเส้นขีดบนสี่เหลี่ยมผืนผ้าเลย ฉันไม่คิดว่า SVG ช่วยให้คุณใช้จังหวะที่แตกต่างกันกับส่วนต่างๆของเส้นทาง / รูปร่างได้ดังนั้นคุณต้องใช้วัตถุหลายชิ้นเพื่อให้ได้เอฟเฟกต์เดียวกัน