时间戳

首页 > 解决方案 > SVG 起始大小为 0 0

javascript - SVG 起始大小为 0 0

问题描述

我正在使用 JS 将 SVG 元素插入到 HTML 中。我希望元素具有width=100%and height=200px。然后我想在 SVG 元素中插入一条路径。路径d取决于 SVG 元素的大小，但在插入后它是 0 0。我试过了：

var board = document.createElementNS('http://www.w3.org/2000/svg','svg');
document.body.append(board);
var h = board.height.baseVal.value; //appears to be 0
var w = board.width.baseVal.value; //appears to be 0

还有这个css：

svg {
width: 100%;
height: 200px;
display: block;
}

不管有没有display: block，结果都是一样的。难道我做错了什么？当我的元素的高度和宽度不为零时，是否会触发任何事件？谢谢！

标签： javascriptsvg

解决方案

<svg> width和height属性的默认值为100%。
您正在访问的 IDL 属性将反映这一点。

您想要的可能更多是节点的边界矩形，但在 HTML 中，如果未明确设置这些属性，它将默认为 300*150（我不记得确切原因，与 inline-replacedElements IIRC.. .，但它至少也涉及 <canvas> <video> 和 <iframe> ）

var board = document.createElementNS('http://www.w3.org/2000/svg','svg');
document.body.append(board);
console.log(board.width.baseVal.valueAsString); // "100%"

// what you want is the bounding rect
const rect = board.getBoundingClientRect();
const w = rect.width; // 300 (+2 border)
const h = rect.height; // 150 (+2 border)

console.log(w, h);
svg {  border: 1px solid; }

如果您希望它默认为 300*150 以外的其他值，则必须明确设置这些属性：

var board = document.createElementNS('http://www.w3.org/2000/svg','svg');
board.setAttribute('width', '100%');
board.setAttribute('height', '100%');

document.body.append(board);
console.log(board.width.baseVal.valueAsString); // "100%"

// what you want is the bounding rect
const rect = board.getBoundingClientRect();
const w = rect.width;
const h = rect.height;

console.log(w, h);
svg {  border: 1px solid; }

推荐阅读