使用Javascript动态添加SVG元素时未正确缩放

我正在尝试使用Javascript在引导网格中添加SVG控件。我可以使用Javascript添加SVG，但是页面的缩放/调整大小并不像是用静态HTML构建的

单击“添加页面”按钮时，一组新的SVG控件将添加到引导网格中。SVG控件不可缩放。行不展开

如果我使用静态HTML构建相同的页面，SVG将按预期控制缩放。我做错了什么？为什么在运行时使用Javascript添加的SVG控件不能按预期扩展

谢谢你的帮助

工作示例（静态HTML）

不工作（Javascript）

HTML

---

因为您是在文档完全加载后添加SVG内容的。我建议您为svg使用AddCSS属性

svg{
  width:100%;
  height:100%;
}

---

这应该缩放到整个宽度的100%。对于高度，我建议使用javascript添加样式，因为您是在文档完全加载后添加SVG内容的。我建议您为svg使用AddCSS属性

svg{
  width:100%;
  height:100%;
}

---

这应该缩放到整个宽度的100%。对于高度，我建议使用javascript添加样式。SVG区分大小写，因此在调用setAttribute时，属性viewBox不能写为viewBox。你想要这个

svg.setAttribute('viewBox', "0 0 816 1056");

---

当您在标记中拼写错误时，解析器会很聪明地为您修复它，这就是为什么它会起作用。

SVG区分大小写，因此在调用setAttribute时，属性viewBox不能写为viewBox。你想要这个

svg.setAttribute('viewBox', "0 0 816 1056");

---

当您在标记中拼写错误时，解析器会很聪明地为您修复它，这就是为什么它会起作用。

我尝试了这个方法，但它不起作用。它不能解决缩放问题。可以在CodePen中尝试：。您还没有添加我上面提到的svg css。我尝试了这个，但它不起作用。它不能解决缩放问题。请在CodePen中尝试：。您还没有添加我上面提到的svg css。谢谢您，Robert。这是我的问题……：）非常感谢你！我在这上面浪费了3个小时！谢谢你，罗伯特！！我个人发现，如果我在devtools中修改html，它会突然变得响应迅速。。。我想那是因为Chrome修复了我的案件敏感性。谢谢你，罗伯特。这是我的问题……：）非常感谢你！我在这上面浪费了3个小时！谢谢你，罗伯特！！我个人发现，如果我在devtools中修改html，它会突然变得响应迅速。。。我想那是因为Chrome修复了我的区分大小写功能。