使用 Javascript 动态添加时，SVG 元素无法正确缩放
Posted
技术标签:
【中文标题】使用 Javascript 动态添加时，SVG 元素无法正确缩放【英文标题】：SVG Element not scaling properly when dynamically added using Javascript 【发布时间】：2020-08-15 14:44:34 【问题描述】：我正在尝试使用 javascript 在 Bootstrap Grid 中添加 SVG 控件。我可以使用 Javascript 添加 SVG，但页面的缩放/调整大小不像是使用静态 html 构建的。
单击“添加页面”按钮时，一组新的 SVG 控件将添加到引导网格。 SVG 控件不缩放。该行不展开。
如果我使用静态 HTML 构建相同的页面，SVG 控件会按预期缩放。我究竟做错了什么？为什么在运行时使用 Javascript 添加的 SVG 控件无法按预期缩放？
感谢您的帮助！
Codepen
工作示例（静态 HTML）
不工作（Javascript）
HTML
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<style>
html
overflow-y: scroll;
</style>
</head>
<body style="background-color: #e6e6e6">
<div id="editor-fluid" class="container">
<div class="row">
<div class=".col-sm-12">
<button id="add-page">Add Page</button>
</div>
</div>
<div class="row">
<div id="page-container-0" class="col-sm-6">
</div>
<div id="page-container-1" class="col-sm-6">
</div>
</div>
<div class="row">
<div id="page-container-2" class="col-sm-6">
</div>
<div id="page-container-3" class="col-sm-6">
</div>
</div>
</div>
<!-- Including Bootstrap JS (with its jQuery dependency) so that dynamic components work -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
<script src="app.js"></script>
</body>
</html>
Javascript
var Startup = (function ()
function Startup()
Startup.main = function ()
var pageNumber = 0;
var addPageButton = document.getElementById('add-page');
addPageButton.addEventListener('click', function ()
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.id = "page-" + pageNumber;
svg.setAttribute('viewbox', "0 0 816 1056");
svg.setAttribute('preserveAspectRatio', 'xMinYMin meet');
var container = document.getElementById('page-container-' + pageNumber++);
container.appendChild(svg);
var page = Snap(svg);
var pageBackground = page.rect(0, 0, 816, 1056);
pageBackground.attr(
fill: 'white',
stroke: 'gray',
strokeWidth: 2,
);
var text = page.text(96, 100, "Hello World");
text.attr(
'font-size': 100,
);
);
return 0;
;
return Startup;
());
Startup.main();
【问题讨论】：
【参考方案1】：SVG 区分大小写，因此当您调用 setAttribute 时，属性 viewBox 不能写为 viewbox。你想要这个……
svg.setAttribute('viewBox', "0 0 816 1056");
当您在标记中拼写错误时，解析器会足够聪明地为您修复它，这就是它起作用的原因。
【讨论】：
谢谢罗伯特。这是我的问题... :) 非常感谢！我为此浪费了 3 个小时的生命！ 是的，谢谢罗伯特！我个人发现，如果我在 devtools 中修改了 html，它会突然变得有响应......我猜那是因为 Chrome 正在修复我的大小写敏感问题。【参考方案2】：因为您是在文档完全加载后添加 SVG 内容。我建议你使用 add CSS property for svg
svg
width:100%;
height:100%;
这应该缩放到 100% 的宽度。对于高度，我建议使用 javascript 添加样式
【讨论】：
我试过了，但它不起作用。它不能解决缩放问题。随意在 CodePen 中试用：codepen.io/callback100/pen/jLOyxL。 你还没有添加我上面提到的svg css以上是关于使用 Javascript 动态添加时，SVG 元素无法正确缩放的主要内容，如果未能解决你的问题，请参考以下文章