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>