html - 为什么我的 SVG 圆圈没有完全显示？

Question

演示 https://codepen.io/joondoe/pen/JjPWjxV

我正在尝试构建一个具有特定高度和宽度的圆，但它溢出了视口(viewport)，尽管我已经精确了一个相关的视口(viewport)。怎么可能？

这里是片段:

@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>

谢谢

Answer 1

宽度和高度不是圆或椭圆的属性。

因此，假设这些被忽略，我们有一个以 (60, 65) 为中心、半径为 155 的圆。这将使 y 尺寸从 -90 延伸到 220，但您的视口(viewport)从 0 到 200px(由您的 CSS 指定) .

如果您想要一个具有特定高度的圆，请将半径设置为该高度的一半。如果您也想要一个特定的宽度，那么通常您会创建一个椭圆。

还要确保调整 SVG 视口(viewport)的大小，使其包含整个 SVG 元素:http://tutorials.jenkov.com/svg/svg-viewport-view-box.html