Question

Google Chrome 60.0.3112.90

我学习SVG。为什么svg 真实的大小不是 10cm x 10cm ，圈stroke-width不是 1pt 和{{1不是 2.5cm ？

radius

.svg-container, .canvas{
	margin: 0;
	padding: 0;
	width: 10cm;
	height: 10cm;
	background-color: green;
}

.geometry {
	stroke: gray;
	fill: yellow;
	stroke-width: 1px;
}

Answer 1

首先：never trust the browser to generate true physical sizes specified in stylesheets on the screen。

请注意，您已将viewBox声明为0 0 10 10，这意味着它是10个单位，10个单位高。应用于此内的SVG元素的所有单位将相对于viewBox维度呈现，即圆上的stroke-width: 1px将呈现为viewBox宽度的1/10。取消viewBox属性将强制以绝对像素呈现事物。

在下面的示例中，我将svg宽度设置为200px以用于说明目的。使用viewBox="0 0 10 10"时，将相对于此维度测量所有单位：

1px的行程宽度将意味着（200÷10）×1 = 20px
2.5的半径将表示（200÷10）×2.5 = 50px

请记住，当viewBox设置时，它会控制内容在其自己的坐标系中的设置方式：并根据{的宽度和高度按比例放大/缩小到屏幕上的实际像素{1}}元素。这里提供了更好的解释：svg viewBox attribute

<svg>

.svg-container, .canvas{
	margin: 0;
	padding: 0;
	width: 200px;
	height: 200px;
	background-color: green;
}

.geometry {
	stroke: gray;
	fill: yellow;
	stroke-width: 1px;
}

为什么`svg`大小和圆圈'笔画宽度'不像预期的那样？

1 个答案: