SVG在動態添加到HTML文檔後未顯示

我使用Saxon CE進行了一些從xml到另一個xml的轉換，然後是svg。我的觀點是，轉換成功完成，並在源代碼中，我可以看到svg已被添加到HTML文檔中，但由於某種原因（我已將可見性設置爲可見，並且沒有幫助）不可見。我在轉換開始之前附加HTML結構，然後是轉換輸出，最後是更新後的HTML。當我在瀏覽器中打開完整的HTML時，它工作正常。它可能是一些運行時問題，但我不知道在哪裏尋找更多信息。SVG在動態添加到HTML文檔後未顯示

編輯：我以前使用的「G」的元素，我認爲這應該與它連接，但不喜歡它似乎

<g>

預先感謝任何提示和幫助，

<!DOCTYPE html> 
<html> 

<head> 
    <title>Book Catalogue</title> 

    <script src="http://localhost:12345/SaxonCE/Saxonce.nocache.js" type="text/javascript"></script> 

    <script type="text/javascript" language="javascript"> 

function PK_func(in_xml) { 
     var proc = Saxon.newXSLT20Processor(Saxon.requestXML("Flattening_XSD_StackOverFlow.xsl")); 
     proc.transformToDocument(Saxon.parseXML(in_xml)); 
     var rd1URI = proc.getResultDocuments()[0]; 
     var rd1Doc = proc.getResultDocument(rd1URI); 
     //var proc2 = Saxon.newXSLT20Processor(Saxon.requestXML("Flattening_XSD_StackOverFlow.xsl")); 
     //proc2.updateHTMLDocument(Saxon.parseXML(in_xml)); 
     return rd1Doc; 
} 

function PK_func_2(in_xml) { 
     var proc = Saxon.newXSLT20Processor(Saxon.requestXML("Visualise_flatten_xsd.xsl")); 
     proc.transformToDocument(Saxon.parseXML(in_xml)); 
     var rd1URI = proc.getResultDocuments()[0]; 
     var rd1Doc = proc.getResultDocument(rd1URI); 
     var proc2 = Saxon.newXSLT20Processor(Saxon.requestXML("Visualise_flatten_xsd.xsl")); 
     proc2.updateHTMLDocument(rd1Doc); 
     return rd1Doc; 
} 

function get_width(input_text) { 
    var measuringCanvas = document.getElementById('measuringCanvas'); 
    var ctx = measuringCanvas.getContext("2d"); 
    ctx.font = "12px Verdana"; 
    var width = ctx.measureText(input_text).width; 
    return width + 60; 
} 

window.onload = function() { 
    var fileInput = document.getElementById('fileInput'); 
    fileInput.addEventListener('change', function(e) { 
     var file = fileInput.files[0]; 
     var reader = new FileReader(); 
     reader.onload = function(e) 
     { 
      var xml = reader.result; 
      var flatten_xsd = PK_func(xml); 
      console.log(flatten_xsd); 
      var visualised_xsd = PK_func_2(flatten_xsd); 
      console.log(visualised_xsd); 
     } 
     reader.readAsText(file); 
    }); 
} 

</script> 

</head> 

<body> 
<div id="sortToolTip" class="tooltip" style="position:fixed; visibility:hidden; left:0px; top:0px"> 
    Click to sort on this column 
</div> 
<canvas id="measuringCanvas" display="none" width="50px" height="50px" style="display: none;"></canvas> 
<h1 id="title">Header</h1> 
<input type="file" id="fileInput"> 

<h2>Genres</h2> 
<div id="genres"></div> 

<h2>Books</h2> 
<div id="XYZ"></div> 

</body> 
</html>

添加的SVG：

<svg visibility="visible" height="500" width="500"> 
    <svg visibility="visible" transform="scale(37.03703703703704)"> 
     <rect style="fill: none; stroke: black; stroke-width:0.1" height="1" width="2" y="1" x="5.5"/> 
     <line style="stroke: black; stroke-width:0.1;" y2="2.5" x2="6.5" y1="2" x1="6.5"/> 
     <line style="stroke: black; stroke-width:0.1;" y2="2.5" x2="6.5" y1="2.5" x1="6.5"/> 
     <line style="stroke: black; stroke-width:0.1;" y2="3" x2="6.5" y1="2.5" x1="6.5"/> 
     <svg visibility="visible" pk:maxy="8" pk:maxx="12.5" pk:thisx="7.5"> 
      <rect style="fill: none; stroke: black; stroke-width:0.1" height="1" width="2" y="3" x="5.5"/> 
      <line style="stroke: black; stroke-width:0.1;" y2="4.5" x2="6.5" y1="4" x1="6.5"/> 
      <line style="stroke: black; stroke-width:0.1;" y2="4.5" x2="11.5" y1="4.5" x1="1.5"/> 
      <line style="stroke: black; stroke-width:0.1;" y2="5" x2="1.5" y1="4.5" x1="1.5"/> 
      <line style="stroke: black; stroke-width:0.1;" y2="5" x2="4" y1="4.5" x1="4"/> 
      <line style="stroke: black; stroke-width:0.1;" y2="5" x2="6.5" y1="4.5" x1="6.5"/> 
      <line style="stroke: black; stroke-width:0.1;" y2="5" x2="9" y1="4.5" x1="9"/> 
      <line style="stroke: black; stroke-width:0.1;" y2="5" x2="11.5" y1="4.5" x1="11.5"/> 

      <svg visibility="visible" pk:maxy="6" pk:maxx="2.5" pk:thisx="2.5"> 
       <rect style="fill: none; stroke: black; stroke-width:0.1;" height="1" width="2" y="5" x="0.5"/> 
      </svg> 

      <svg visibility="visible" pk:maxy="6" pk:maxx="5" pk:thisx="5"> 
       <rect style="fill: none; stroke: black; stroke-width:0.1;" height="1" width="2" y="5" x="3"/> 
      </svg> 

      <svg visibility="visible" pk:maxy="6" pk:maxx="7.5" pk:thisx="7.5"> 
       <rect style="fill: none; stroke: black; stroke-width:0.1;" height="1" width="2" y="5" x="5.5"/> 
      </svg> 

      <svg visibility="visible" pk:maxy="6" pk:maxx="10" pk:thisx="10"> 
       <rect style="fill: none; stroke: black; stroke-width:0.1;" height="1" width="2" y="5" x="8"/> 
      </svg> 
      <svg visibility="visible" pk:maxy="8" pk:maxx="12.5" pk:thisx="12.5"> 
       <rect style="fill: none; stroke: black; stroke-width:0.1" height="1" width="2" y="5" x="10.5"/> 
       <line style="stroke: black; stroke-width:0.1;" y2="6.5" x2="11.5" y1="6" x1="11.5"/> 
       <line style="stroke: black; stroke-width:0.1;" y2="6.5" x2="11.5" y1="6.5" x1="11.5"/> 
       <line style="stroke: black; stroke-width:0.1;" y2="7" x2="11.5" y1="6.5" x1="11.5"/> 

       <svg visibility="visible" pk:maxy="8" pk:maxx="12.5" pk:thisx="12.5"> 
        <rect style="fill: none; stroke: black; stroke-width:0.1;" height="1" width="2" y="7" x="10.5"/> 
       </svg> 
      </svg> 
     </svg> 
    </svg> 
</svg>

的最後文件（其被渲染「細」，在至少任在所有:)德爾斯）：

<html> 
<head> 
<title>Book Catalogue</title> 
<script src="http://localhost:12345/SaxonCE/Saxonce.nocache.js" type="text/javascript"></script><script defer="defer">Saxonce.onInjectionDone('Saxonce')</script> 

<script type="text/javascript" language="javascript"> 
function PK_func(in_xml) { 
     var proc = Saxon.newXSLT20Processor(Saxon.requestXML("Flattening_XSD_StackOverFlow.xsl")); 
     proc.transformToDocument(Saxon.parseXML(in_xml)); 
     var rd1URI = proc.getResultDocuments()[0]; 
     var rd1Doc = proc.getResultDocument(rd1URI); 
     return rd1Doc; 
} 

function PK_func_2(in_xml) { 
     var proc = Saxon.newXSLT20Processor(Saxon.requestXML("Visualise_flatten_xsd.xsl")); 
     proc.transformToDocument(Saxon.parseXML(in_xml)); 
     var rd1URI = proc.getResultDocuments()[0]; 
     var rd1Doc = proc.getResultDocument(rd1URI); 
     var proc2 = Saxon.newXSLT20Processor(Saxon.requestXML("Visualise_flatten_xsd.xsl")); 
     proc2.updateHTMLDocument(rd1Doc); 
     return rd1Doc; 
} 

function get_width(input_text) { 
    var measuringCanvas = document.getElementById('measuringCanvas'); 
    var ctx = measuringCanvas.getContext("2d"); 
    ctx.font = "12px Verdana"; 
    var width = ctx.measureText(input_text).width; 
    return width + 60; 
} 

window.onload = function() { 
    var fileInput = document.getElementById('fileInput'); 
    fileInput.addEventListener('change', function(e) { 
     var file = fileInput.files[0]; 
     var reader = new FileReader(); 
     reader.onload = function(e) 
     { 
      var xml = reader.result; 
      var flatten_xsd = PK_func(xml); 
      console.log(flatten_xsd); 
      var visualised_xsd = PK_func_2(flatten_xsd); 
      console.log(visualised_xsd); 
     } 
     reader.readAsText(file); 
    }); 
} 

</script> 
</head> 

<body> 
<div id="sortToolTip" class="tooltip" style="position:fixed; visibility:hidden; left:0px; top:0px"> 
    Click to sort on this column 
</div> 
<canvas id="measuringCanvas" display="none" width="50px" height="50px" style="display: none;"></canvas> 
<h1 id="title">Header</h1> 
<input id="fileInput" type="file"> 

<h2>Genres</h2> 
<div id="genres"></div> 

<h2>Books</h2> 
<div id="XYZ"></div> 

<iframe tabindex="-1" style="position: absolute; width: 0px; height: 0px; border: medium none;" id="Saxonce" src="javascript:''"></iframe> 
    <svg visibility="visible" height="500" width="500"> 
    <svg visibility="visible" transform="scale(37.03703703703704)"> 
     <rect style="fill: none; stroke: black; stroke-width:0.1" height="1" width="2" y="1" x="5.5"/> 
     <line style="stroke: black; stroke-width:0.1;" y2="2.5" x2="6.5" y1="2" x1="6.5"/> 
     <line style="stroke: black; stroke-width:0.1;" y2="2.5" x2="6.5" y1="2.5" x1="6.5"/> 
     <line style="stroke: black; stroke-width:0.1;" y2="3" x2="6.5" y1="2.5" x1="6.5"/> 
     <svg visibility="visible" pk:maxy="8" pk:maxx="12.5" pk:thisx="7.5"> 
      <rect style="fill: none; stroke: black; stroke-width:0.1" height="1" width="2" y="3" x="5.5"/> 
      <line style="stroke: black; stroke-width:0.1;" y2="4.5" x2="6.5" y1="4" x1="6.5"/> 
      <line style="stroke: black; stroke-width:0.1;" y2="4.5" x2="11.5" y1="4.5" x1="1.5"/> 
      <line style="stroke: black; stroke-width:0.1;" y2="5" x2="1.5" y1="4.5" x1="1.5"/> 
      <line style="stroke: black; stroke-width:0.1;" y2="5" x2="4" y1="4.5" x1="4"/> 
      <line style="stroke: black; stroke-width:0.1;" y2="5" x2="6.5" y1="4.5" x1="6.5"/> 
      <line style="stroke: black; stroke-width:0.1;" y2="5" x2="9" y1="4.5" x1="9"/> 
      <line style="stroke: black; stroke-width:0.1;" y2="5" x2="11.5" y1="4.5" x1="11.5"/> 

      <svg visibility="visible" pk:maxy="6" pk:maxx="2.5" pk:thisx="2.5"> 
       <rect style="fill: none; stroke: black; stroke-width:0.1;" height="1" width="2" y="5" x="0.5"/> 
      </svg> 

      <svg visibility="visible" pk:maxy="6" pk:maxx="5" pk:thisx="5"> 
       <rect style="fill: none; stroke: black; stroke-width:0.1;" height="1" width="2" y="5" x="3"/> 
      </svg> 

      <svg visibility="visible" pk:maxy="6" pk:maxx="7.5" pk:thisx="7.5"> 
       <rect style="fill: none; stroke: black; stroke-width:0.1;" height="1" width="2" y="5" x="5.5"/> 
      </svg> 

      <svg visibility="visible" pk:maxy="6" pk:maxx="10" pk:thisx="10"> 
       <rect style="fill: none; stroke: black; stroke-width:0.1;" height="1" width="2" y="5" x="8"/> 
      </svg> 
      <svg visibility="visible" pk:maxy="8" pk:maxx="12.5" pk:thisx="12.5"> 
       <rect style="fill: none; stroke: black; stroke-width:0.1" height="1" width="2" y="5" x="10.5"/> 
       <line style="stroke: black; stroke-width:0.1;" y2="6.5" x2="11.5" y1="6" x1="11.5"/> 
       <line style="stroke: black; stroke-width:0.1;" y2="6.5" x2="11.5" y1="6.5" x1="11.5"/> 
       <line style="stroke: black; stroke-width:0.1;" y2="7" x2="11.5" y1="6.5" x1="11.5"/> 

       <svg visibility="visible" pk:maxy="8" pk:maxx="12.5" pk:thisx="12.5"> 
        <rect style="fill: none; stroke: black; stroke-width:0.1;" height="1" width="2" y="7" x="10.5"/> 
       </svg> 
      </svg> 
     </svg> 
    </svg> 
</svg> 
</body> 
</html>

來源

2014-10-26 Alone89

你可以在彼此內部堆疊多個'svg'嗎？ – myfunkyside 2014-10-26 20:22:12

我沒有檢查所有的腳本代碼，但你似乎創建SVG首先作爲XML我會首先確保SVG元素在SVG命名空間，而不是啓動在你沒有顯示的樣本中沒有命名空間。

來源

2014-10-26 20:27:52

SVG在動態添加到HTML文檔後未顯示

回答

相關問題