使用Javascript动态添加时，SVG元素无法正确缩放 [英] SVG Element not scaling properly when dynamically added using Javascript
问题描述
我正在尝试使用Javascript在Bootstrap网格中添加SVG控件.我可以使用Javascript添加SVG，但是页面的缩放/调整大小不会像使用静态HTML构建页面时那样.
I am trying to add SVG controls in a Bootstrap Grid using Javascript. I am able to add the SVG using Javascript, but the scaling/resize of the page does not behave as if it would have been built with static HTML.
单击添加页面"按钮时，会将一组新的SVG控件添加到Bootstrap网格中. SVG控件未缩放.该行不会展开.
When clicking on the "Add Page" button, a new set of SVG controls are added to a Bootstrap Grid. The SVG controls are not scaling. The row does not expand.
如果我使用静态HTML构建同一页面，则SVG控件将按预期缩放.我究竟做错了什么?为什么使用Javascript在运行时添加的SVG控件无法按预期缩放?
If I build the same page using static HTML, the SVG controls scale as expected. What am I doing wrong? Why the SVG controls added at runtime using Javascript do not scale as expected?
谢谢您的帮助！
工作示例(静态HTML)
Working Example (Static HTML)
不起作用(JavaScript)
Not working (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();
推荐答案
SVG区分大小写，因此调用setAttribute时，属性viewBox不能写为viewbox.你想要这个...
SVG is case sensitive so the attribute viewBox cannot be written as viewbox when you call setAttribute. You want this...
svg.setAttribute('viewBox', "0 0 816 1056");
当您在标记中拼写错误时，解析器足够聪明，可以为您修复它，这就是它起作用的原因.
When you misspell it in markup the parser is clever enough to fix it for you which is why that works.
这篇关于使用Javascript动态添加时，SVG元素无法正确缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
