css - 为什么 `svg` 大小和圆圈 `stroke-width` 不符合预期？

Question

谷歌浏览器 60.0.3112.90

我学习 SVG。为什么 svg real 大小不是 10cm x 10cm，圆 stroke-width 不是 1pt 和 radius 不是 2.5cm 吗？

.svg-container, .canvas{
	margin: 0;
	padding: 0;
	width: 10cm;
	height: 10cm;
	background-color: green;
}

.geometry {
	stroke: gray;
	fill: yellow;
	stroke-width: 1px;
}

<div class='svg-container'>
  <svg class='canvas' viewBox='0 0 10 10'>
    <circle class='geometry' cx='5' cy='5'
      r='2.5'/>
  </svg>
</div>

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它设置，它控制内容如何在其自己的坐标系内设置:并且根据 <svg> 的宽度和高度将其放大/缩小为屏幕上的实际像素。元素。这里提供了更好的解释:svg viewBox attribute

.svg-container, .canvas{
	margin: 0;
	padding: 0;
	width: 200px;
	height: 200px;
	background-color: green;
}

.geometry {
	stroke: gray;
	fill: yellow;
	stroke-width: 1px;
}

<div class='svg-container'>
  <!-- Viewbox forces all units to be relative to its dimensions -->
  <svg class='canvas' viewBox='0 0 10 10'>
    <circle class='geometry' cx='5' cy='5'
      r='2.5'/>
  </svg>
</div>

<br />

<div class='svg-container'>
  <!-- Without viewbox, all units are rendered in px -->
  <svg class='canvas'>
    <circle class='geometry' cx='50' cy='50'
      r='25'/>
  </svg>
</div>