Menu
Setting a stroke-width: 1 on a <rect> element in SVG places a stroke on every side of the rectangle.
How does one place a stroke width on only three sides of an SVG rectangle?
288
You can add a stroke with stroke="black" stroke-width="10" and then adjust your viewBox accordingly.
The stroke-width property is used to set the width of a border in a SVG shape. This property can only be applied to elements that have a shape or are text content elements. Property Values: length: It is used to set the stroke width in measurement units.
The fill-rule attribute is a presentation attribute defining the algorithm to use to determine the inside part of a shape. Note: As a presentation attribute, fill-rule can be used as a CSS property. You can use this attribute with the following SVG elements: <altGlyph> <path>
If you need stroke or no-stroke then you can also use stroke-dasharray to do this, by making the dashes and gaps match up with the sides of the rectangle.
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>See jsfiddle.
195
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
