html文本框在SVG foreignObject中不起作用_Html_Angularjs_Svg

html文本框在SVG foreignObject中不起作用

html angularjs svg

html文本框在SVG foreignObject中不起作用,html,angularjs,svg,Html,Angularjs,Svg,我正在使用Angular JS和svg开发流程图web应用程序：一切正常，但有一个奇怪的问题：SVG中使用的HTML元素（实际上在foreignObject标记中呈现）不起作用。例如，文本框根本无法编辑，组合框项目也无法选择。单击标题（ناابگه），它将被更改为文本框，但您不能在该文本框中写入任何内容，发生了什么问题这是我的foreignObject标记代码： <foreignObject x="50" y="50" width="350" height="200" style="

我正在使用Angular JS和svg开发流程图web应用程序：

一切正常，但有一个奇怪的问题：SVG中使用的HTML元素（实际上在foreignObject标记中呈现）不起作用。例如，文本框根本无法编辑，组合框项目也无法选择。单击标题（ناابگه），它将被更改为文本框，但您不能在该文本框中写入任何内容，发生了什么问题

这是我的foreignObject标记代码：

<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>


var nodeIndex=0；
功能开关（索引）{
var name=“div”+索引；
div1.style.display=“无”；
div2.style.display=“无”；
div3.style.display=“无”；
tab1.style.backgroundColor=“浅灰色”；
tab2.style.backgroundColor=“浅灰色”；
tab3.style.backgroundColor=“浅灰色”；
document.getElementById（名称）.style.display=“”；
name=“tab”+索引；
document.getElementById（名称）.style.backgroundColor=“浅绿色”；
}
函数折叠（）{
if（imgCollapse.src.indexOf（“visible.png”）！=-1）{
imgCollapse.src=“流程图/折叠的.png”；
divBody.style.display=“无”；
}
否则{
imgCollapse.src=“流程图/visible.png”；
divBody.style.display=“”；
}
}
函数更改标题标签（id）{
var lbl=document.getElementById（id）；
var txt=document.getElementById（id.replace（“lbl”、“txt”）；
lbl.style.display=“无”；
txt.style.display=“”；
txt.value=lbl.innerHTML；
}
函数changeTileText（id）{
var txt=document.getElementById（id）；
var lbl=document.getElementById（id.replace（“txt”，“lbl”））；
lbl.style.display=“”；
txt.style.display=“无”；
lbl.innerHTML=txt.value；
}
Init（）；
函数Init（）{
var titlebar=document.getElementsByClassName（“titlebar”）；
nodeIndex=标题栏长度；
var tmpTitleBar=document.getElementById（'divTitleBar'）；
tmpTitleBar.id=“divTitleBar”+节点索引；
var iconid=“imgIcon”+节点索引；
var lbltileid=“lblTitle”+节点索引；
var txtiteid=“txtitle”+节点索引；
document.getElementById（“divTitleBar”+nodeIndex）.innerHTML+=“divTitleBar”和“nodeIndex”；
document.getElementById（“divTitleBar”+nodeIndex）.innerHTML+=”；
document.getElementById（“divTitleBar”+nodeIndex）.innerHTML+=”；
}

有几个问题：

Init（）
在创建dom之前，调用
```
Init
```
例程。不要在
```
script
```
部分中调用它，而是用svg元素注册一个onload处理程序（不包含在代码中）：

请注意，
```
onload
```
必须全部为小写，并且处理程序不能在
```
foreignObject
```
内的
```
body
```
元素中注册（这是此答案以前版本中的错误）
脚本标记
```
script
```
标记需要从
```
foreignObject
```
中拉出，并作为
```
svg
```
元素的子元素插入
功能崩溃
您没有定义变量
```
divBody
```
。将功能
```
折叠
```
更改为：
函数折叠（）{ var divBody=document.getElementById（'divBody'）； //... }
函数更改标题标签/文本

您错误地使用了事件处理程序。指定他们的呼叫方式

onclick='ChangeTitleLabel(\""+lbltileid+"\")'
onclick='ChangeTitleText(\""+txttiteid+"\")'

（您正在字符串中生成调用的词汇化）

元
您不需要
```
meta
```
元素

不幸的是，onload=“init”在这里不起作用（为什么？），我甚至测试了静态文本框（即，我在HTML中插入了文本框元素，而不是使用JS动态添加它们），但同样没有运气。我认为有一个与SVG和foreignObjectI相关的问题，事实并非如此——我刚刚在Chrome40上的标准SVG包装器中测试了您的代码，它运行良好。您在javascript控制台中查看过可能的错误消息吗？获取我们的代码，用标准svg元素将其包装，在本地文件系统中将其保存为.svg文件，在浏览器中调用该文件。顺便说一句，我注意到我的测试不够彻底，没有错误报告，但无论如何都不起作用。我已经更正了我的答案。很明显，初始化现在可以工作了。