javascriptを使用してマスターSVGオブジェクトからsvgビューボックスを動的に作成するにはどうすればよいですか？

Question

私のページには非常に大きくて複雑なsvg要素があります。私の目標は、svgをプロッタのスケールまでさまざまなサイズで印刷可能にすることです。グラフィックが用紙サイズよりも大きい場合、画像は複数のページにまたがるようにタイルする必要があります。理想的にはブラウザ（Firefox 38をターゲットにする）は私のためにSVGグラフィックをタイル/ラップしますが、それは可能ではないようです。 svgグラフィックを適切なサイズに拡大して印刷すると、ページ境界を超えて何かが途切れてしまいます。ビューボックスがセットに属性とスライスSVGの内容は、このような<use></use>タグでいると私は小さいスライスSVG要素の数にSVGを分割することができ、この問題に対する解決策として

：

<div id="SVGMasterDiv"> 
    <svg id="SVGMaster" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="4903.745578" height="1092.0904763600001" xml:space="preserve"> 
     <!-- a lot of svg here --> 
    </svg> 
</div> 
<div id="SVGAttribObj" data-canvaswidth="2451.872789" data-canvasheight="546.0452381800001"></div> 
<div id="SVGSlicesDiv"> 
    <svg viewbox="0 0 245.1872789 546.0452381800001" width="1.3470712411148744in" height="3in" style=""> 
     <use xlink:href="#SVGMaster"></use> 
    </svg> 
    <svg viewbox="245.1872789 0 245.1872789 546.0452381800001" width="1.3470712411148744in" height="3in"> 
     <use xlink:href="#SVGMaster"></use> 
    </svg> 
    <svg viewbox="490.3745578 0 245.1872789 546.0452381800001" width="1.3470712411148744in" height="3in"> 
     <use xlink:href="#SVGMaster"></use> 
    </svg> 
    <svg viewbox="735.5618367 0 245.1872789 546.0452381800001" width="1.3470712411148744in" height="3in"> 
     <use xlink:href="#SVGMaster"></use> 
    </svg> 
    <svg viewbox="980.7491156 0 245.1872789 546.0452381800001" width="1.3470712411148744in" height="3in"> 
     <use xlink:href="#SVGMaster"></use> 
    </svg> 
    <svg viewbox="1225.9363945 0 245.1872789 546.0452381800001" width="1.3470712411148744in" height="3in"> 
     <use xlink:href="#SVGMaster"></use> 
    </svg> 
    <svg viewbox="1471.1236734 0 245.1872789 546.0452381800001" width="1.3470712411148744in" height="3in"> 
     <use xlink:href="#SVGMaster"></use> 
    </svg> 
    <svg viewbox="1716.3109523 0 245.1872789 546.0452381800001" width="1.3470712411148744in" height="3in"> 
     <use xlink:href="#SVGMaster"></use> 
    </svg> 
    <svg viewbox="1961.4982312 0 245.1872789 546.0452381800001" width="1.3470712411148744in" height="3in"> 
     <use xlink:href="#SVGMaster"></use> 
    </svg> 
    <svg viewbox="2206.6855101 0 245.1872789 546.0452381800001" width="1.3470712411148744in" height="3in"> 
     <use xlink:href="#SVGMaster"></use> 
    </svg> 
</div> 

の場合これをhtmlファイルに保存すると、これはうまく動作します。

問題は私が動的に行う必要がある - 私は、ユーザーがインチにsvgをスケールするための高さを指定できるように私のページにドロップダウンがある、とスライスの数を作成し、スライスsvg要素

function Coordsheet_MakeLayoutPrintable(numSlices, pageHeight){ 
    // This function divides the SVGMaster into slices that may be printed 
    // The new elements will be placed in the same div as the SVGMaster div 

    // Determine where to put the child divs 
    var holderDiv = document.getElementById('SVGSlicesDiv'); 
    holderDiv.innerHTML = ""; 

    // Get the attributes saved when the SVGMaster was created 
    var attribObj = document.getElementById('SVGAttribObj'); 
    var width = parseFloat(attribObj.getAttribute('data-canvasWidth')) 
    var height = parseFloat(attribObj.getAttribute('data-canvasHeight')) 

    // Make a series of containers for the svg element in the result holder div 
    var blockWidth = width/numSlices; 
    var pageWidth = blockWidth * pageHeight/height; 

    for (var i = 0; i < numSlices; i++) { 
     x = i * blockWidth; 

     var s = document.createElement('svg'); 
     s.innerHTML = '<use xlink:href="#SVGMaster">'; 
     s.setAttribute("viewBox", x + " " + 0 + " " + (blockWidth) + " " + (height)); 
     s.setAttribute("width", blockWidth); 
     s.setAttribute("height", height); 

     // Viewport size (size visible) 
     s.setAttribute("height", pageHeight + "in"); 
     s.setAttribute("width", pageWidth + "in"); 
     holderDiv.appendChild(s); 
    } 
} 

上記のhtmlが表示されますが、何らかの理由で更新がページに表示されません。 viewBoxスライスが更新されるように、ブラウザにsvg（または何でも）を再ロードさせるにはどうすればよいですか？

tl; dr：viewBoxのsvg要素は、オンザフライで生成されるとレンダリングされないのはなぜですか？

Answer 1

createElementを使用してSVG要素を作成することはできません。これはhtml要素のみを作成します。代わりに、代わりにcreateElementNSを使用する必要があります。

var s = document.createElementNS('http://www.w3.org/2000/svg', 'svg');