使用 Javascript 动态添加时，SVG 元素无法正确缩放

Question

I am trying to add SVG controls in a Bootstrap Grid using Javascript.我正在尝试使用 Javascript 在 Bootstrap 网格中添加 SVG 控件。 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.我可以使用 Javascript 添加 SVG，但是页面的缩放/调整大小的行为不像它是用静态 HTML 构建的。

When clicking on the "Add Page" button, a new set of SVG controls are added to a Bootstrap Grid.单击“添加页面”按钮时，一组新的 SVG 控件将添加到 Bootstrap 网格中。 The SVG controls are not scaling. SVG 控件不缩放。 The row does not expand.该行不展开。

If I build the same page using static HTML, the SVG controls scale as expected.如果我使用静态 HTML 构建相同的页面，SVG 控件将按预期缩放。 What am I doing wrong?我究竟做错了什么？ Why the SVG controls added at runtime using Javascript do not scale as expected?为什么在运行时使用 Javascript 添加的 SVG 控件不能按预期缩放？

Thank you for the help!感谢您的帮助！

Codepen代码笔

Working Example (Static HTML)工作示例（静态 HTML）

Not working (Javascript)不工作（Javascript）

HTML 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 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();

Answer 1

SVG is case sensitive so the attribute viewBox cannot be written as viewbox when you call setAttribute. SVG 区分大小写，因此在调用 setAttribute 时无法将属性 viewBox 写为 viewbox。 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.当您在标记中拼错它时，解析器足够聪明，可以为您修复它，这就是它起作用的原因。

Answer 2

Since you are adding SVG content after document is completely loaded.由于您在文档完全加载后添加 SVG 内容。 I would suggest you to use add CSS property for svg我建议您为 svg 使用添加 CSS 属性

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

This should scale to full 100% of width.这应该缩放到完全 100% 的宽度。 For the height, I would recommend to add style using javascript对于高度，我建议使用 javascript 添加样式

使用 Javascript 动态添加时，SVG 元素无法正确缩放

问题描述

2 个解决方案

解决方案1
4 已采纳 2017-07-24 08:41:27

解决方案2
-1 2017-07-24 08:01:31

使用 Javascript 动态添加时，SVG 元素无法正确缩放

问题描述

2 个解决方案

解决方案1 4 已采纳 2017-07-24 08:41:27

解决方案2 -1 2017-07-24 08:01:31

解决方案1
4 已采纳 2017-07-24 08:41:27

解决方案2
-1 2017-07-24 08:01:31