Question

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

我试图构建一个具有特定高度和宽度的圆，但是尽管我已经精确确定了相关的视口，但是它却使视口溢出。怎么可能？

以下是代码段：

@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

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

因此，如果忽略了这些，我们将有一个以（155，60）为中心的圆，其半径为155。这将使y尺寸从-90扩展到220，但是您的视口从0到200px（由CSS指定）

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

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

为什么我的SVG圈子无法完全显示？

1 个答案: