Javascript SVG开始大小为0

我正在使用JS将SVG元素插入HTML。我希望元素具有

宽度=100%

和

高度=200px

。然后我想在SVG元素中插入一条路径。路径

d

取决于SVG元素的大小，但插入后它就是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;
}

---

无论是否存在显示：块，结果都是相同的。我做错什么了吗？当我的元素的高度和宽度非零时，是否有触发的事件？谢谢大家!

宽度和高度属性的默认值为

100%

您正在访问的IDL属性将反映这一点

您想要的可能更多的是节点的边界rect，但在HTML中，如果没有显式设置这些属性，它将默认为300*150（我不记得确切的原因，与内联替换有关，但它也涉及到，至少）

var board=document.createElements（'http://www.w3.org/2000/svg'、'svg'）；
文件.正文.附件（板）；
console.log（board.width.baseVal.valueAsString）；//"100%"
//您需要的是边界矩形
const rect=board.getBoundingClientRect（）；
常数w=矩形宽度；//300（+2个边界）
常数h=垂直高度；//150（+2个边界）
控制台日志（w，h）
svg{border:1px solid；}
宽度和高度属性的默认值为
100%


您正在访问的IDL属性将反映这一点

您想要的可能更多的是节点的边界rect，但在HTML中，如果没有显式设置这些属性，它将默认为300*150（我不记得确切的原因，与内联替换有关，但它也涉及到，至少）


var board=document.createElements（'http://www.w3.org/2000/svg'、'svg'）；
文件.正文.附件（板）；
console.log（board.width.baseVal.valueAsString）；//"100%"
//您需要的是边界矩形
const rect=board.getBoundingClientRect（）；
常数w=矩形宽度；//300（+2个边界）
常数h=垂直高度；//150（+2个边界）
控制台日志（w，h）
svg{border:1px solid；}
document.createElements（'http://www.w3.org/2000/svg“，”svg“
只需创建空的svg。svg元素没有宽度或高度，这是用于调整svg viewboxwidth=100%的HTML Dom的宽度或高度？？？
document.createElements（'http://www.w3.org/2000/svg“，”svg“
只需创建空的svg。svg元素没有宽度或高度，这是用于调整svg viewboxwidth的HTML Dom的宽度或高度=什么的100%？？？