SVG Element not scaling properly when dynamically added using Javascript

问题

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.

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.

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?

Thank you for the help!

Codepen

Working Example (Static HTML)

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

回答1:

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.

回答2:

Since you are adding SVG content after document is completely loaded. I would suggest you to use add CSS property for svg

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

This should scale to full 100% of width. For the height, I would recommend to add style using javascript

来源：https://stackoverflow.com/questions/45274554/svg-element-not-scaling-properly-when-dynamically-added-using-javascript

标签

javascript

html

css

svg

twitter-bootstrap-3