CODEWITHSUNDEEP
htmlsvg
Umair
Umair

Reputation: 3243

SVG stroke width expand inside bounding rectangle

I have begun working with SVGs and have (quickly) hit a road block.

I am trying to find a way to add a border around a rectangle but for it to only "expand" inside. Currently I am just drawing a path around the rectangle and using stroke width. This has the desired effect of showing a "filling" animation when used with css transition. But I don't want it to expand outside of the bounds of the rectangle. See images

enter image description here

with path

enter image description here

As you can see the stroke width is going in both directions, outside of the bounding rectangle and inside. How would I get rid of the outside bit?

Upvotes: 2

Views: 3713

Answers (2)

Robert Longson
Robert Longson

Reputation: 123995

Draw the <rect> within an inner <svg> element which is the same size as the <rect>. The inner <svg> element will clip the <rect>.

You can also do this with a clip-path or a clip if you want but the inner <svg> way is simpler.

Upvotes: 3

radiaph
radiaph

Reputation: 4081

I don't believe it is possible to have the stroke only appear on one side of the line (someone correct me if that's wrong).

Here are two approaches to achieving the effect you want:

Approach #1:

Simply put the bounding rectangle before the filled inner rectangle in your SVG. The filled rectangle will be "above" the bounding rectangle due to SVG precedence rules, and if you expand it to the right size it will cover up the inside part of the bounding rectangle's stroke.

Approach #2:

Set the stroke-width to half its current value, then draw the bounding rectangle half a stroke width further out in all directions.

Upvotes: 2

Related Questions