CODEWITHSUNDEEP
htmlsvg
Jack Maessen
Jack Maessen

Reputation: 1864

how to make a stroke around a circle in svg

I am trying to make a stroke around a svg circle but there is a flattening at the top. bottom. left and right side.

<div class="wrapper">

<svg version="1.1" id="elp-badge" class="headerbadge"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    viewBox="0 0 289.1 289.1" enable-background="new 0 0 289.1 289.1"
    xml:space="preserve">

    <circle class="circle" fill="#1e90ff" stroke="red" stroke-width="5" cx="144.5" cy="144.5" r="144.5"/>       
</svg> 

</div>

This is how it looks like:

enter image description here

Here is my fiddle: https://jsfiddle.net/nLf7ad3p/2/

How can I correct the flattening?

Upvotes: 1

Views: 64

Answers (2)

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85643

The radius should be applied only half. That is 144.5/2 = 72.25.

<div class="wrapper">

<svg version="1.1" id="elp-badge" class="headerbadge"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    viewBox="0 0 289.1 289.1" enable-background="new 0 0 289.1 289.1"
    xml:space="preserve">

    <circle class="circle" fill="#1e90ff" stroke="red" stroke-width="5" cx="144.5" cy="144.5" r="72.25"/>       
</svg> 

</div>

https://jsfiddle.net/nLf7ad3p/4/

By this, you're going to get smaller sized circle. To increase the size, just set the width and height value higher.

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167240

Just add padding to the parent:

.wrapper {
  width: 250px;
  height: 250px;
}
svg {
  padding: 10px;
}
<div class="wrapper">
  <svg version="1.1" id="elp-badge" class="headerbadge" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 289.1 289.1" enable-background="new 0 0 289.1 289.1" xml:space="preserve">
    <circle class="circle" fill="#1e90ff" stroke="red" stroke-width="5" cx="144.5" cy="144.5" r="144.5"/>       
  </svg>
</div>

Preview

This is what I get:

preview

Upvotes: 0

Related Questions