0

javascriptを使用してフォーム入力要素でforeignGroupを動的に作成しているときに問題が発生します。ブラウザインスペクタで要素を確認できますが、どういうわけか表示されません。見えると思います!!

javascript：

    var forObj = document.createElement("foreignObject");
        forObj.setAttribute("x", "100");
        forObj.setAttribute("y", "100");
        forObj.setAttribute("width", "200");
        forObj.setAttribute("height", "250");
        forObj.setAttribute("background", "red");


    var askInput = document.createElement("input");
        askInput.setAttribute("id", "test");
        askInput.setAttribute("type", "text");
        askInput.setAttribute("width", "300");
        askInput.setAttribute("height", "50");
        askInput.setAttribute("x", "100");
        askInput.setAttribute("y", "100");

        forObj.appendChild(askInput);

        mySvg.appendChild(forObj);

svgのforeignGroupをphpファイルに直接追加すると、機能し、問題はありません。

このバグなのか、それとも私が見逃しているものなのか。

4

1 に答える 1

0

最初のコメントが言うように、次のように、 document.createElementの代わりにdocument.createElementNSを使用するのは簡単でした。

var forObj = document.createElementNS("foreignObject");
        forObj.setAttribute("x", "100");
        forObj.setAttribute("y", "100");
        forObj.setAttribute("width", "200");
        forObj.setAttribute("height", "250");
        forObj.setAttribute("background", "red");


    var askInput = document.createElementNS("input");
        askInput.setAttribute("id", "test");
        askInput.setAttribute("type", "text");
        askInput.setAttribute("width", "300");
        askInput.setAttribute("height", "50");
        askInput.setAttribute("x", "100");
        askInput.setAttribute("y", "100");

        forObj.appendChild(askInput);

        mySvg.appendChild(forObj);
于 2015-07-31T21:08:16.470 に答える