Question

我尝试在页面中生成<rect/>元素：

<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;" />');
        }
    }
});

它没有显示在页面上，但我在控制台的DOM中看到它们。

Answer 1

除了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);
});

如果您想操纵SVG，我建议您查看类似d3.js的内容，为您提供更多使用SVG的工具

Answer 2

尝试将您的w和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;" />');
        }
    }
});

未显示SVG元素

2 个答案: