SVG uneven stroke-width

Question

The fiddle below shows an SVG map with CSS hover animations.

https://jsfiddle.net/persianturtle/akkjcmo1/

svg .state:hover , .state.active {
    cursor: pointer;
    stroke-width: 4;
    stroke-alignment: inner;
    stroke: #000;
    z-index: 100;
}

It doesn't seem that the stroke-alignment: inner; property is being applied. It seems that different states on the map have different strokes depending on which state the border is 'owned' by. Is there a way to have a unified stroke width for all hovered states?

To see the problem clearly, hover over California and then Utah. California has a nice unified stroke-width. Utah does not.

`stroke-alignment` is part of an SVG extension called [SVG Strokes](https://www.w3.org/TR/svg-strokes/) and is still a working draft. I don't think it has been implemented in any production software yet as there a fundamental questions still open such as what "inner" means in an open path. — Codo, Jan 25 '16 at 18:43
@Codo. Thanks for the explanation. I will instead animate the `fill` which works well. — Raphael Rafatpanah, Jan 25 '16 at 18:47

score 2 · Accepted Answer · edited May 23 '17 at 12:23

Take a look at this:

I made the stroke width 15 just to show that it's a matter of what element gets printed first. in SVG, you kind of can't set a z-index to the elements because their priority is set by the order in which they appear in the code. You'd need some JavaScript (I think) to re-order the elements. A good starting point is this question: SVG re-ordering z-index (Raphael optional).

Also, as pointed out in the comments, stroke-alignment is still a working draft and might simply not be working.

score 2 · Answer 2 · answered Mar 07 '18 at 13:31

So, I ran into this with a polygon, exactly the stroke behavior you described and stroke-alignment: inner; not being acknowledged.

So, because the stroke-alignment is being ignored, the part of the stroke on the very edge of the artboard get clipped.

I have a greatly simplified version of what you're doing and I'm calculating my points dynamically, but the work around was to set my polygon/path a couple of pixels inside, so for example point 0,0 becomes 2,2.

Then all the points and their outside/center aligned strokes fit inside the artboard and don't get clipped.

SVG uneven stroke-width

2 Answers2