我正在使用Saxon CE进行从xml到另一个xml然后到svg的一些转换。我的观点是，转换成功完成，在源代码中，我能够看到svg已添加到HTML文档中，但由于某种原因不可见（我已将可见性设置为可见，但没有帮助）。我在转换开始之前附加HTML结构，然后是转换输出，最后是更新的HTML。当我在浏览器中打开完整的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>
答案 0 :(得分：0)
我还没有检查所有脚本代码，但是你似乎首先创建SVG作为XML我首先要确保SVG元素位于SVG名称空间中，而不是像你显示的样本中那样没有名称空间。