Javascript 未显示SVG元素

我尝试在我的页面中生成

元素：

<svg style="width:1920px; height:1080px;" xmlns="http://www.w3.org/2000/svg"></svg>

此代码：

var w = $("svg").width();
var h = $("svg").height();
$(document).ready(function () {
    for (var i = 0; i < w; i += 30) {
        for (var j = 0; j < h; j += 30) {
            $("svg").append('<rect x=' + i + ' y=' + j + ' width="30px" height="30px" style="stroke: black; fill: none;" />');
        }
    }
});

var w=$（“svg”）.width（）；
var h=$（“svg”）.height（）；
$（文档）.ready（函数（）{
对于（变量i=0；i

---

它不会显示在页面上，但我可以在我的控制台的DOM中看到它们。

尝试将您的

w

anf

h

变量放入DOM就绪处理程序中：

$(document).ready(function () {
    var w = $("svg").width();
    var h = $("svg").height();
    for (var i = 0; i < w; i += 30) {
        for (var j = 0; j < h; j += 30) {
            $("svg").append('<rect x=' + i + ' y=' + j + ' width="30px" height="30px" style="stroke: black; fill: none;" />');
        }
    }
});

$（文档）.ready（函数（）{
var w=$（“svg”）.width（）；
var h=$（“svg”）.height（）；
对于（变量i=0；i

除了felix指出的问题外，我认为问题在于jquery创建新DOM元素的方式不适合SVG（或命名空间元素），您可以通过设置SVG的innerHTML或类似的方式来解决：

$(document).ready(function () {
    var w = $("svg").width();
    var h = $("svg").height();
    var html = '';

    for (var i = 0; i < w; i += 30) {
        for (var j = 0; j < h; j += 30) {
            html += '<rect x=' + i + ' y=' + j + ' width="30px" height="30px" style="stroke: black; fill: none;" />';
        }
    }

    $("svg").html(html);
});

$（文档）.ready（函数（）{
var w=$（“svg”）.width（）；
var h=$（“svg”）.height（）；
var html=''；
对于（变量i=0；i

如果你想操纵SVG，我建议你研究一下这样的东西，它会给你更多的工具来使用SVG