Question

我正在使用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>

Answer 1

有几个问题：

初始化（）

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

请注意onload必须全小写，并且处理程序无法在body内的foreignObject元素中注册（这是此答案的先前版本中的错误））。
脚本标记

script代码需要从foreignObject中提取出来并作为svg元素的子代插入。
功能折叠

您没有定义变量divBody。将函数Collapse更改为：

function Collapse（）{ var divBody = document.getElementById（'divBody'）; // ... }
功能ChangeTitleLabel / Text

您错误地使用了事件处理程序。通过

指定他们的电话

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

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

元

您不需要meta元素。

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

1 个答案: