2

javascriptを使用して動的に作成されるSVG内に単純なテキスト入力の配列を作成しようとしています。

最初はPHPで実行していましたが、スニペットは次のようになります。

for ($row=0; $row<7; $row++)
{
for ($col=0; $col<7; $col++)
{
    $fx=130+100*$col;
    $fy=120+100*$row;
    echo "<foreignObject x="".$fx."" y="".$fy."" width="50" height="80">\n<body xmlns="http://www.w3.org/1999/xhtml">\n<form><input type="text" width="1"/ style="font-size:48px; border:none;"></form>\n</body>\n</foreignObject>";
}
}

次に、JavaScriptで、このような単一のインスタンスに対して試してみましたが、これを機能させることができませんでした。

var field = document.createElementNS("http://www.w3.org/2000/svg", "foreignObject");
field.setAttribute("x", "130");
field.setAttribute("y", "120");
field.setAttribute("width", "50");
field.setAttribute("height", "80");
mySvg.appendChild(field.cloneNode(true));
var s = '<body xmlns="http://www.w3.org/1999/xhtml"><form><input type="text" width="1" style="font-size:48px; border:none;"></form></body>';
var s1 = document.createElement(s);
field.appendChild(s1);
</script>

ヒントはありますか？または、完全に異なる実装（CSSなど）に切り替える必要がありますか？

4

1 に答える 1

1

document.createElementは、引数として要素名を必要とし、単一の要素を作成します。任意のhtml/xmlコンテンツを解析しません。

DOMParserを使用して、マークアップの文字列を解析できます。

PHPに関しては、おそらくエコー内の内部二重引用符をエスケープする必要があります。

于 2012-12-07T14:17:09.920 に答える