为什么我生成的SVG存在固定宽高？该问题要如何解决？

• 无任何属性的SVG标签属于行内替换元素，遵循W3C规范的默认尺寸规则，默认宽高为 300px × 150px，你没有手动给外层SVG设置宽高或视口属性，就会继承这个默认值。
• 你内部绘制的rect尺寸为800×800，起始坐标x/y为25，总占位尺寸超过了外层SVG的默认视口大小，同时因为没有配置viewBox属性，SVG不会自动缩放内部元素适配视口，超出视口的内容就会被直接截断，最终只显示rect左上角的部分区域。

方案1：固定SVG显示尺寸 #

直接给外层SVG设置和内部画布匹配的宽高属性，适合不需要自适应、固定大小展示的场景，修改avatar.js即可：

const svg = document.querySelector("svg");
// 新增：设置SVG宽高，覆盖内部元素总占位（rect起始25+宽高800，总大小850足够）
svg.setAttribute('width', '850');
svg.setAttribute('height', '850');

let svgns = "http://www.w3.org/2000/svg";
let avatar = document.createElementNS(svgns, "rect");

let base_width = 800
let base_height = 800

avatar.setAttributeNS(null, "x", 25);
avatar.setAttributeNS(null, "y", 25);
avatar.setAttributeNS(null, "width", base_width);
avatar.setAttributeNS(null, "height", base_height);
avatar.setAttributeNS(null, "fill", "green"); 

svg.appendChild(avatar)

方案2：配置viewBox实现自适应展示 #

配置viewBox属性定义SVG的内部画布坐标范围，后续可以任意调整SVG的显示宽高，内部元素会自动等比缩放适配，适合需要做响应式、或者后续要调整头像显示大小的场景：

const svg = document.querySelector("svg");
// 新增：配置viewBox，参数格式为 最小x 最小y 画布宽度 画布高度
svg.setAttribute('viewBox', '0 0 850 850');
// 可选：设置SVG在页面上的显示大小，比如设为200px宽的头像，高度自动等比适配
svg.style.width = '200px';
svg.style.height = 'auto';

let svgns = "http://www.w3.org/2000/svg";
let avatar = document.createElementNS(svgns, "rect");

let base_width = 800
let base_height = 800

avatar.setAttributeNS(null, "x", 25);
avatar.setAttributeNS(null, "y", 25);
avatar.setAttributeNS(null, "width", base_width);
avatar.setAttributeNS(null, "height", base_height);
avatar.setAttributeNS(null, "fill", "green"); 

svg.appendChild(avatar)

内容的提问来源于stack exchange，提问作者Linus J