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

我想在使用Javascript的引導網格中添加SVG控件。我可以使用Javascript添加SVG，但頁面的縮放/調整大小不會像使用靜態HTML構建一樣。當使用Javascript動態添加時，SVG元素無法正確縮放

當點擊「Add Page」按鈕時，一組新的SVG控件被添加到Bootstrap Grid中。 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();

來源

2017-07-24 Martin

SVG區分大小寫，因此當您調用setAttribute時，viewBox屬性不能寫爲視圖框。你要這個......

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

當你標記拼錯它的解析器是足夠聰明的爲您解決問題這是爲什麼的作品。

來源

2017-07-24 08:41:27

謝謝羅伯特。這是我的問題...... :) – Martin

非常感謝你！我浪費了3個小時的時間！ – FloG

-1

既然你加入SVG內容文檔被完全加載後。我建議你使用添加CSS屬性的svg

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

這應該縮放到100％的寬度。對於高度，我會建議使用javascript添加樣式

來源

2017-07-24 08:01:31

我試過了，它不起作用。它不能解決縮放問題。隨意在CodePen中試用它：https：//codepen.io/callback100/pen/jLOyxL。 – Martin

您還沒有添加上面提到的svg css –

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

回答

相關問題