CODEWITHSUNDEEP
svg
mardukevich
mardukevich

Reputation: 150

SVG cuts off circle

I have such code:

<svg width="100" height="100">
   <circle cx="50" cy="50" r="50" stroke="green" stroke='1' stroke-width="1" fill='yellow'/>
</svg>

in result i get cutted off circle.

enter image description here

Is it any method to draw full circle without decreasing circles radius ?

Upvotes: 0

Views: 107

Answers (2)

herrstrietzel
herrstrietzel

Reputation: 17155

Is it any method to draw full circle without decreasing circles radius ?

There are also workarounds but I strongly recommend the cleaner way as described by @chrwahl (reducing the radius)

Hacky workarounds (without changing radius)

<style>
  svg {
    border: 1px dotted #777;
    display: inline-block;
    height: 75vmin;
    width: auto
  }
</style>
  
<h3>1. Quick and dirty: Overflow:visible</h3>
<p>Will just prevent any cropping. <br/>Drawbacks: svg might collide with neighboring elements</p>
<p>
<svg  viewBox="0 0 100 100" overflow="visible">
   <circle cx="50" cy="50" r="50" stroke="green" stroke-width="5" fill='yellow'/>
</svg> 
  <svg  viewBox="0 0 100 100" overflow="visible">
   <circle cx="50" cy="50" r="50" stroke="red" stroke-width="5" fill='yellow'/>
</svg> 
</p>

<h3>2. Scale element to fit: </h3>
<p>width / (width+strokeWidth) = 0.95238 <br> Drawbacks: Stroke-width will also be decreased due to downscaling</p>
<p>
<svg viewBox="0 0 100 100" >
   <circle transform-origin="center" transform="scale(0.95238)" cx="50" cy="50" r="50" stroke="green" stroke-width="5" fill='yellow'/>
</svg> 
</p>

<h3>3. Change viewBox to fit</h3>
<p>Drawbacks: Some graphic application might have issues with negative viewBox values (or ignore them)</p>
<p>
<svg viewBox="-2.5 -2.5 105 105">
   <circle  cx="50" cy="50" r="50" stroke="green" stroke-width="5" fill='yellow'/>
</svg> 
</p>

Upvotes: 0

chrwahl
chrwahl

Reputation: 13070

The stroke width is both inside and outside the stroke line. In the example I changed the radius to 49.5 for the stroke that has the width 1. In the second example I made the stroke thicker (10) and half transparent, so that you can see that the stoke cover part of the fill on the inside and outside.

<svg width="100" height="100">
   <circle cx="50" cy="50" r="49.5" stroke="green" stroke-width="1" fill='yellow'/>
</svg>

<svg width="100" height="100">
   <circle cx="50" cy="50" r="45" stroke="darkblue" stroke-opacity=".5" stroke-width="10" fill='yellow'/>
</svg>

Upvotes: 1

Related Questions