如何不使用 width 和 height 控制 svg 的渲染大小？-灵析社区

height: auto | | = auto 定义 SVG 视口呈现区域的垂直长度。 * 如果 svg 是在 html 元素内,如果没有设置 viewBox 属性,那么 height 会默认值渲染为 150px。如果设置了 viewBox 属性,没有设置 width 属性,那么 width 默认是 100%,然后根据 width 的值和 viewBox 比例计算 height 的值。支持百分比,百分比相对父元素。 * 如果 svg 是在 svg 元素内,如果没有设置 viewBox 属性,那么设置的 width 和 height 是失效的,内部元素直接使用外部的 viewBox 进行计算。如果设置了 viewBox 属性,那么 height 默认是 100%。支持百分比,百分比相对父级的用户坐标系统 支持 Animatable,而且有过渡效果 width: auto | | = auto 定义 SVG 视口呈现区域的水平长度。 * 如果 svg 是在 html 元素内,如果没有设置 viewBox 属性,那么 width 会默认值渲染为 300px。如果设置了 viewBox 属性,没有设置 width 属性,那么 width 默认是 100%。支持百分比,百分比相对父元素。 * 如果 svg 是在 svg 元素内,如果没有设置 viewBox 属性,那么设置的 width 和 height 是失效的(也可以理解为都变为 100%),内部元素直接使用外部的 viewBox 进行计算。如果设置了 viewBox 属性,那么默认 height width 100%。支持百分比,百分比相对父级的用户坐标系统 支持 Animatable,而且有过渡效果 svg 是在 svg 元素内,是 svg 嵌套进 svg 的情况 就你的问题来说,可以在 svg 中添加 viewBox="0 0 160 40" 这个属性就可以了,把 text 标签上 transform 属性删除掉。可以看看这里 nicegui_word.svg 是直接用 path 元素来绘制文字,你的是直接用 text 元素来绘制文字,这就好比 line 元素可以绘制线段,path 元素也可以绘制线段,只是绘制的方式不同而已。