Не отображаются элементы SVG

Question

Не отображаются элементы SVG

0

Я пытаюсь создать элементы <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 на моей консоли.

Denis 17 апр. 2014, в 06:42

Источник

Теги:

javascript

jquery

html

html5

svg

2 ответа

0

Попробуйте поместить переменную 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;" />');
        }
    }
});

Felix 17 апр. 2014, в 02:41

Ещё вопросы

Jaime · Accepted Answer · 2014-04-17T02-23-00.000Z

Помимо проблемы, которую указал Феликс, я думаю, проблема заключается в том, что jquery создает новые элементы DOM, которые не работают с SVG (или с именами элементов), вы можете сделать это, установив innerHTML SVG или что-то вроде:

$(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