CODEWITHSUNDEEP
csssvg
Raphael Rafatpanah
Raphael Rafatpanah

Reputation: 19967

SVG uneven stroke-width

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.

Upvotes: 4

Views: 2666

Answers (2)

MichaelClark
MichaelClark

Reputation: 1212

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.

Upvotes: 2

fnune
fnune

Reputation: 5494

Take a look at this:

enter image description here

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.

Upvotes: 2

Related Questions