使用 Javascript 動態添加時，SVG 元素無法正確縮放

Question

我正在嘗試使用 Javascript 在 Bootstrap 網格中添加 SVG 控件。 我可以使用 Javascript 添加 SVG，但是頁面的縮放/調整大小的行為不像它是用靜態 HTML 構建的。

單擊“添加頁面”按鈕時，一組新的 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 寫為 viewbox。 你要這個...

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

當您在標記中拼錯它時，解析器足夠聰明，可以為您修復它，這就是它起作用的原因。

Answer 2

由於您在文檔完全加載后添加 SVG 內容。 我建議您為 svg 使用添加 CSS 屬性

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

這應該縮放到完全 100% 的寬度。 對於高度，我建議使用 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