CODEWITHSUNDEEP
htmlcsssvg
Diagathe Josué
Diagathe Josué

Reputation: 11976

Why my SVG's circle doesnt display entirely?

demo https://codepen.io/joondoe/pen/JjPWjxV

I am trying to build a circle with a specifc height and width but it overflows the viewport, despite I have precised a relevant viewport. How it is possible?

here the snippet: 

@font-face {
 font-family: 'pt_sansregular';
 src: url('../font/pt_sansregular.woff') format('woff');
 font-weight: normal;
 font-style: normal;
}
body { font-family: 'pt_sansregular', sans-serif; padding: 2rem; }
span { width: 200px; vertical-align: top; }
svg { display: inline-block; height: 200px; padding-top: 20px; }
#circleID, #ellipseID { margin-left: -125px; }
 <h2>Beginning SVG: Drawing Circles and Ellipses</h2>
	<span> adding a circle</span>
	<svg  width="500" height="300" id="circleID">
		<circle 
			cx="60" cy="65" r="155"
			width="700" height="700"
			stroke="black" fill="transparent" stroke-width="5"
		/>
	</svg>

	<span> adding a ellipse</span>
	<svg id="ellipseID">
		<ellipse 
			cx="75" cy="75" width="150" height="100"
			rx="70" ry="50"
			stroke="#a6a6a6" fill="transparent" stroke-width="5"
		/>
	</svg>

thanks

Upvotes: 0

Views: 220

Answers (1)

Robert Longson
Robert Longson

Reputation: 123995

width and height are not properties of circles or ellipses.

So given these are ignored we have a circle centred on (60, 65) with radius 155. That's going to have y dimensions stretching from -90 to 220 but your viewport goes from 0 to 200px (as specified by your CSS).

If you want a circle with a specific height, have the radius be half that height. If you want a specific width too, then in general you're going to create an ellipse.

Also ensure you size the SVG viewport allow it to contain the whole SVG element: http://tutorials.jenkov.com/svg/svg-viewport-view-box.html

Upvotes: 2

Related Questions