Question

我正在尝试使用Javascript在Bootstrap网格中添加SVG控件。我能够使用Javascript添加SVG，但页面的缩放/调整大小不会像使用静态HTML构建一样。

点击＆＃34;添加页面＆＃34;按钮，一组新的SVG控件被添加到Bootstrap网格中。 SVG控件没有缩放。该行不会扩展。

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

感谢您的帮助！

工作示例（静态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();

Answer 1

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

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

当你在标记中拼错它时，解析器很聪明，可以为你修复它，这就是为什么会有效。

Answer 2

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

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

这应该扩展到100％的宽度。对于高度，我建议使用javascript添加样式

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

2 个答案: