Menu
My SVG's strokes are somehow cut off when I have a large stroke width for my rectangle. I have the following code:
<svg width="500px" height="300px">
<rect width="352" height="128" stroke="#333" stroke-width="16" fill-opacity="0"/>
</svg>
Here's the jsfiddle: https://jsfiddle.net/7ej6fzbg/3/
As you can see from the jsfiddle, the stroke widths are cut slightly for the top and left sides of the rectangle. How do I fix this such that the stroke widths are 16 pixels across the entire rectangle?
I believe I can change the x and y positions of the rectangle, but I believe that wouldn't be very robust if I wanted to change the stroke width later on. Any ideas?
454
You can add a stroke with stroke="black" stroke-width="10" and then adjust your viewBox accordingly.
The stroke-width attribute is a presentation attribute defining the width of the stroke to be applied to the shape. You can use this attribute with the following SVG elements: <altGlyph> <circle> <ellipse>
The stroke-linecap attribute is a presentation attribute defining the shape to be used at the end of open subpaths when they are stroked. Note: As a presentation attribute stroke-linecap can be used as a CSS property.
Using fill sets the color inside the object and stroke sets the color of the line drawn around the object. You can use the same css color naming schemes that you use in HTML, whether that's color names (that is red ), rgb values (that is rgb(255,0,0) ), hex values, rgba values, etc.
The stroke-width property in CSS is for setting the width of a border on SVG shapes. This will override a presentation attribute <path stroke-width="2" ... /> The stroke-width property can accept any number, including whole numbers, decimals, and percentages:
The SVG <rect> element creates a rectangle, as well as rectangle shape variations. It is possible to draw rectangles of various height, width, with different stroke and fill colors, etc. We are going to try some examples. Now let’s explain this code: The width and height attributes specify the height and the width of the rectangle.
SVG offers a wide range of stroke properties. In this chapter we will look at the following: All the stroke properties can be applied to any kind of lines, text and outlines of elements like a circle. Sorry, your browser does not support inline SVG. The stroke-width property defines the thickness of a line, text or outline of an element:
The CSS stroke-width property is used to specify the width of the rectangle’s border. The CSS stroke property specifies the color of the rectangle’s border. Let’s explain the code above: The x attribute specifies the left position of the rectangle. The y attribute specifies the top position of the rectangle.
Since the rect strokes are centered on the boundary of the rectangle, either use half the stroke width every time (8 in this case) for X and Y:
<svg width="500px" height="300px">
<rect x="8" y="8" width="352" height="128" stroke="#333" stroke-width="16" fill-opacity="0"/>
</svg>
or offset the viewbox of the SVG by half the stroke width:
<svg width="500px" height="300px" viewbox="-8 -8 492 292">
<rect width="352" height="128" stroke="#333" stroke-width="16" fill-opacity="0"/>
</svg>
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
