nodejs42 (UI相关) : svg的viewBox属性

svg原始的width和height属性

• svg原始的width 和 height控制画布的大小，确定了图形能显示的最大范围。 viewBox 控制图形在画布中的位置和相对大小。

• 当不设置viewBox时，SVG内容会以其自身的尺寸（以像素为单位）进行渲染，这通常意味着1个用户单位等同于1个像素。例如，如果有一个<svg width="100" height="100">但没有指定viewBox，那么这个SVG画布将是100x100像素，并且在这个SVG内部使用的任何坐标都将基于这一设定，即(0, 0)位于左上角，而(100, 100)则对应右下角。

• 不设置viewbox时，只增大图形的长和宽不能放大图形，只会放大画布

svg的viewBox属性

viewBox 是 SVG (Scalable Vector Graphics) 中非常重要的一个属性，它定义了一个坐标系统，决定了SVG图形的显示区域，将视图窗口的内容填充到整个画布。viewBox 属性有四个值，通常以以下格式书写：

viewBox="min-x min-y width height"

• min-x：视图框的左上角 x 坐标，决定了起始的水平位置。
• min-y：视图框的左上角 y 坐标，决定了起始的垂直位置。
• width：视图框的宽度，表示图形的可视区域的水平尺寸。
• height：视图框的高度，表示图形的可视区域的垂直尺寸。

示例

<svg width="400" height="400">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

• 将原来左上角的图像作为视图窗口：

<svg viewBox="0 0 100 100"  width="400" height="400">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>