Currently building a browser-based SVG application. Within this app, various shapes can be styled and positioned by the user, including rectangles.
When I apply a
stroke-width to an SVG
rect element of say
1px, the stroke is applied to the
rect’s offset and inset in different ways by different browsers. This is proving to be troublesome, especially when I try to calculate the outer width and visual position of a rectangle and position it next to other elements.
My only solution so far would be to draw the actual borders myself (probably with the
path tool) and position the borders behind the stroked element. But this solution is an unpleasant workaround, and I’d prefer not to go down this road if possible.
So my question is, can you control how an SVG’s
stroke-width is drawn on elements?
This question is tagged with
~ Asked on 2011-08-30 09:49:07
No, you cannot specify whether the stroke is drawn inside or outside an element. I made a proposal to the SVG working group for this functionality in 2003, but it received no support (or discussion).
As I noted in the proposal,
Edit: This answer may be wrong in the future. It should be possible to achieve these results using SVG Vector Effects, by combining
veIntersect (for 'inside') or with
veExclude (for 'outside). However, Vector Effects are still a working draft module with no implementations that I can yet find.
Edit 2: The SVG 2 draft specification includes a
stroke-alignment property (with center|inside|outside possible values). This property may make it into UAs eventually.
Edit 3: Amusingly and dissapointingly, the SVG working group has removed
stroke-alignment from SVG 2. You can see some of the concerns described after the prose here.
~ Answered on 2011-09-01 16:26:18
stroke-alignment attribute was on April 1st, 2015 moved to a completely new spec called SVG Strokes.
It seems to work the same way as the
stroke-location property proposed by @Phrogz and the later
stroke-position suggestion. This property has been planned since at least 2011, but apart from an annotation that said
SVG 2 shall include a way to specify stroke position
, it has never been detailed in the spec as it was deferred - until now, it seems.
No browser support this property, or, as far as I know, any of the new SVG 2 features, yet, but hopefully they will soon as the spec matures. This has been a property I personally have been urging to have, and I'm really happy that it's finally there in the spec.
There seems to be some issues as to how to the property should behave on open paths as well as loops. These issues will, most probably, prolong implementations across browsers. However, I will update this answer with new information as browsers begin to support this property.
~ Answered on 2015-02-28 22:10:36