CODEWITHSUNDEEP
htmlcssxmlsvg
Marc Auciello
Marc Auciello

Reputation: 33

SVG 'stroke-width' changes dimensions of the object

I am playing around with SVG images. In the following code:

<svg height="250px" width="250px">
<circle
  r="120"
  cx="125"
  cy="125"
  fill="#334d5c"
  stroke="#e27a3f"
  stroke-width="1px"
/>
</svg>

when I increase the stroke-width property, it starts to change the radius of the circle, making it smaller.

My questions are: What is the ratio or rate of change of this process? How do the additional pixels get added to the radius of the circle? Is there a way to remove this effect?

Thank you for you time.

Upvotes: 1

Views: 1162

Answers (2)

ccprog
ccprog

Reputation: 21811

The middle of the stroke coincides with the radius of the circle (or more general, the position of a path). Half increases the overall size, half decreases the visible size of the fill.

But that is only a default, because the stroke is painted after the fill. You can change that order with the CSS property paint-order. If you set that to stroke, the stroke will be painted first, and the fill later, so that it covers the inner half of the stroke.

<svg height="250px" width="250px">
<circle style="fill:#334d5c;stroke:#e27a3f;stroke-width:10px;"
  r="120"
  cx="125"
  cy="125"
/>
</svg>

<svg height="250px" width="250px">
<circle style="fill:#334d5c;stroke:#e27a3f;stroke-width:10px;paint-order:stroke;"
  r="120"
  cx="125"
  cy="125"
/>
</svg>

This is supported by all browsers but IE and Edge <17.

Upvotes: 0

Paul LeBeau
Paul LeBeau

Reputation: 101800

The radius decreases by half the stroke width.

If you want the circle fill to not decrease in size, then the simplest workaround is to have two circles. Put the one with the stroke behind the one with the fill.

But note that, if you use this method, half the stroke width will be hidden by the front circle. So if you need a 10px stroke, you would actually need to set the stroke-width to 20px.

<svg height="250px" width="250px">
<circle
  r="120"
  cx="125"
  cy="125"
  fill="#334d5c"
  stroke="#e27a3f"
  stroke-width="10px"
/>
</svg>


<svg height="250px" width="250px">
  <circle r="120" cx="125" cy="125"
          stroke="#e27a3f" stroke-width="10px"/>
  <circle r="120" cx="125" cy="125"
          fill="#334d5c"/>
</svg>

Upvotes: 2

Related Questions