为什么我生成的 SVG 得到固定的高度和高度？答案

【问题标题】：Why does my generated SVG get a fixed with and a height?为什么我生成的 SVG 得到固定的高度和高度？
【发布时间】：2022-01-01 19:03:04
【问题描述】：

我正在尝试使用 SVG 和 javscript 为学校项目重新创建 github 的自动生成头像系统。但是我遇到了一个 CSS 错误。每当我创建一个空的 svg 标记然后将 svg 元素附加到 svg 标记时，图像 svg 就会获得具有固定宽度和高度的固定位置。为什么有办法解决这个问题以及如何解决？

头像.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test for the avatar script</title>
</head>
<body>
    <svg></svg>
    <script src="scripts/avatar.js"></script>
</body>
</html>

头像.js

const svg = document.querySelector("svg");

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)

如图所示，svg 的宽度和高度为 300x150 像素，即使我没有指定高度和高度。但是 rect 元素的宽度和高度为 800x800 像素。为什么会这样？

【问题讨论】：

300 x 150 是默认大小。要更改它，您需要具有宽度和高度属性，甚至更好的是 viewBox 属性。您还可以从 CSS 更改大小。 css-tricks.com/scale-svg/…

标签： javascript css svg

【解决方案1】：

正如@enxaneta 建议的那样，给你的SVG 一个viewBox，你可以将它缩放到你想要的任何大小。在这里，我将其缩小到 80x80。

const svg = document.querySelector("svg");

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)

svg {
  background-color: linen;
}

&lt;svg width="80" height="80" viewBox="0 0 1000 1000"&gt;&lt;/svg&gt;

【讨论】：