使用Javascript动态添加SVG元素时未正确缩放
我正在尝试使用Javascript在引导网格中添加SVG控件。我可以使用Javascript添加SVG,但是页面的缩放/调整大小并不像是用静态HTML构建的 单击“添加页面”按钮时,一组新的SVG控件将添加到引导网格中。SVG控件不可缩放。行不展开 如果我使用静态HTML构建相同的页面,SVG将按预期控制缩放。我做错了什么?为什么在运行时使用Javascript添加的SVG控件不能按预期扩展 谢谢你的帮助 工作示例(静态HTML) 不工作(Javascript) HTML使用Javascript动态添加SVG元素时未正确缩放,javascript,html,css,svg,twitter-bootstrap-3,Javascript,Html,Css,Svg,Twitter Bootstrap 3,我正在尝试使用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修复了我的区分大小写功能。