I'm working on a flowchart web application using Angular-JS and svg:
everything works fine but there is an strange problem: HTML elements used in SVG (which are in fact rendered inside the foreignObject tag) don't work. For instance text box cannot be edited at all and combo box items cannot be selected. Click on the title (نام برگه), it will then be changed into a textbox, but you cannot write anything in this textbox, what is going wrong?
here is my foreignObject tag code:
<foreignObject x="50" y="50" width="350" height="200" style="z-
index:2000;" >
<script>
var nodeIndex = 0;
function Switch(index) {
var name = "div" + index;
div1.style.display = "none";
div2.style.display = "none";
div3.style.display = "none";
tab1.style.backgroundColor = "lightgray";
tab2.style.backgroundColor = "lightgray";
tab3.style.backgroundColor = "lightgray";
document.getElementById(name).style.display = "";
name = "tab" + index;
document.getElementById(name).style.backgroundColor = "lightgreen";
}
function Collapse() {
if (imgCollapse.src.indexOf("visible.png")!=-1) {
imgCollapse.src = "flowchart/collapsed.png";
divBody.style.display = "none";
}
else {
imgCollapse.src = "flowchart/visible.png";
divBody.style.display = "";
}
}
function ChangeTitleLabel(id) {
var lbl = document.getElementById(id);
var txt = document.getElementById(id.replace("lbl", "txt"));
lbl.style.display = "none";
txt.style.display = "";
txt.value = lbl.innerHTML;
}
function ChangeTitleText(id) {
var txt = document.getElementById(id);
var lbl = document.getElementById(id.replace("txt", "lbl"));
lbl.style.display = "";
txt.style.display = "none";
lbl.innerHTML = txt.value;
}
Init();
function Init() {
var titlebars = document.getElementsByClassName("titlebar");
nodeIndex = titlebars.length;
var tmpTitleBar = document.getElementById('divTitleBar');
tmpTitleBar.id = "divTitleBar" + nodeIndex;
var iconid = "imgIcon" + nodeIndex;
var lbltileid = "lblTitle" + nodeIndex;
var txttiteid = "txtTitle" + nodeIndex;
document.getElementById("divTitleBar" + nodeIndex).innerHTML += "<span id='" + lbltileid + "' style='cursor:hand; cursor:pointer;' onclick='ChangeTitleLabel(this.id)' >نام برگه</span>";
document.getElementById("divTitleBar" + nodeIndex).innerHTML += "<input id='" + txttiteid + "' value='نام برگه' type='text' style='display:none; z-index:2000; font-family:Tahoma;' onclick='ChangeTitleText(this.id)' />";
document.getElementById("divTitleBar" + nodeIndex).innerHTML += "<img src='flowchart/icon.png' style='cursor:hand; cursor:pointer; height:22px; float:left;' id='" + iconid + "' />";
}
</script>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<body xmlns="http://www.w3.org/1999/xhtml" >
<div style="width:350px; direction:rtl; font-family:Tahoma; font-size:small;">
<div style="width:350px; height:22px; background-color:lightgreen; direction:rtl; border-style:solid; border-color:black; border-width:1px;" class="titlebar" id="divTitleBar">
<img src="flowchart/visible.png" style="cursor:hand; cursor:pointer; height:22px;" id="imgCollapse" onclick="Collapse()" />
</div>
<div style="width:350px; height:200px; font-family:Tahoma; direction:rtl; border-style:solid; border-width:1px;" id="divBody">
</div>
</div>
</body>
</foreignObject>