javascript生成的SVG中的異物

Question

我試圖在使用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）？

Answer 1

document.createElement需要元素名稱作為參數並創建一個元素，它不會解析任意html / xml內容。

您可以使用DOMParser解析標記字符串。

至於PHP，您可能需要在回顯中轉義內部雙引號。

javascript生成的SVG中的異物

問題描述

1 個解決方案

解決方案1
1 已采納 2012-12-07 14:17:09

javascript生成的SVG中的異物

問題描述

1 個解決方案

解決方案1 1 已采納 2012-12-07 14:17:09

解決方案1
1 已采納 2012-12-07 14:17:09