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>