Chromium SVG 图像嵌套

Question

我正在尝试将一些图像标签附加到 SVG 元素。在 Firefox(38.0) 中工作正常，但在 Chromium（版本 41.0.2272.76 Ubuntu 15.04（64 位））中嵌套元素，导致它们无法工作。

function append_image(x, y, img) {
    var image = $('<image></image>');
    image.attr('height', '60px');
    image.attr('width', '54px');
    image.attr('x', x);
    image.attr('y', y);
    //image.attr('xlink:href','img/orientierung.png');
    image.attr('xlink:href', 'img/' + img + '.png');
    image.width = 54;
    return image;

    //g.append(image);
}

function reload() {
    var svg = $('#gamegrid');
    svg.unbind().empty();

    for (var x = currentXStart; x < menge + currentXStart; x++) {
        for (var y = currentYStart; y < menge + currentYStart; y++) {
            var g = $('<g></g>');
            var hex = $('<polygon></polygon>');

            var calculatedX = 0;
            var calculatedY = starty + (horizDistance * (y - currentYStart));

            g.append(hex);

            if (y % 2 == 0) {
                calculatedX = startx + (vertDistance * (x - currentXStart));
            }
            else {
                calculatedX = startx + (vertDistance * (x - currentXStart)) + vertDistance / 2;
            }
            $(hex).attr('points', draw_hex(calculatedX, calculatedY, size));
            $(hex).addClass('field');
            $(hex).attr('data-x', x);
            $(hex).attr('data-y', (y));
            $(hex).attr('data-height', elemente[x][(y)]['height']);
            if (x - currentXStart == 5 && (y) - currentYStart == 5) {
                $(hex).addClass('position');

                g.append(append_image(Math.round(calculatedX) - 28, Math.round(calculatedY) - 33, 'player'));
            }

            if (elemente[x][y]['river_in'] != undefined && elemente[x][y]['river_in'] >= 0 && elemente[x][y]['river_in'] !== false) {
                $(hex).attr('data-river_in', elemente[x][y]['river_in']);
                g.append(append_image(Math.round(calculatedX) - 28, Math.round(calculatedY) - 33, 'wasser/fluss' + elemente[x][y]['river_in']));
            }
            if (elemente[x][y]['river_out'] != undefined && elemente[x][y]['river_out'] > 0) {
                $(hex).attr('data-river_out', elemente[x][y]['river_out']);
                g.append(append_image(Math.round(calculatedX) - 28, Math.round(calculatedY) - 33, 'wasser/fluss' + elemente[x][y]['river_out']));
            }
            svg.append(g);
        }
    }


    var gamegrid = svg.html();
    svg.html(gamegrid);
    $('g').click(function () {
        var field = $('.field', this);
        var x = $(field).attr('data-x');
        var y = $(field).attr('data-y');
        var selected_field = $('#selected_field');
        $('.xpos', selected_field).attr('selected-x', $(field).attr('data-x')).html($(field).attr('data-x') + "x");
        $('.ypos', selected_field).attr('selected-y', $(field).attr('data-y')).html($(field).attr('data-y') + "y");
    });
}

在 Firefox 中结果正常：

<svg style="height: 577.538px; width: 674px;" id="gamegrid">
    <g>

        <polygon class="field" points="595.9807621135332,460.6537180435968 570,475.6537180435968 54…68 570,415.6537180435968 595.9807621135332,430.6537180435968" data-x="13" data-y="12" data-height="10" data-river_in="0" data-river_out="3" data-forrest="299"></polygon>
        <image height="60px" width="54px" x="542" y="413" xlink:href="img/wasser/fluss0.png"></image>
        <image height="60px" width="54px" x="542" y="413" xlink:href="img/wasser/fluss3.png"></image>  
    </g>
</svg>

在Chrome中是嵌套的

<svg id="gamegrid" style="height: 577.538290724796px; width: 674px;">
    <g>
        <polygon points="465.98076211353316,152.92304845413264 440,167.92304845413264 414.01923788646684,152.92304845413264 414.01923788646684,122.92304845413264 440,107.92304845413264 465.98076211353316,122.92304845413263" class="field" data-x="10" data-y="5" data-height="10" data-river_in="0" data-river_out="1" data-forrest="342">
        </polygon>
        <image height="60px" width="54px" x="412" y="105" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img/wasser/fluss0.png">
            <image height="60px" width="54px" x="412" y="105" xlink:href="img/wasser/fluss1.png">
            </image>
        </image>
    </g>
</svg>

我有报告说这也适用于 chrome。

提前致谢。

Answer 1

您不能使用 vanilla jQuery 创建和操作 SVG 文档。有些功能可以使用，但 $('<g></g>') 之类的功能不能使用。 jQuery 旨在对 HTML 元素进行操作，无法正确创建 SVG 元素。

我认为 Mozilla 比较宽松，但您不应期望其他浏览器也能正常工作。

要跨浏览器创建 SVG 元素，您应该使用 JS SVG 库之一，例如 jQuery.SVG、Snap、D3、Raphael 等。或者您可以使用 vanilla Javascript 创建它们:

var g = document.createElementNS("http://www.w3.org/2000/svg", "g");
var hex = document.createElementNS("http://www.w3.org/2000/svg", "polygon");

Chromium SVG 图像嵌套

Chromium SVG image Nesting

jquery

image

google-chrome

svg

chromium