如何在 svg 标签内的图像标签上放置边框和超链接？

Question

我有一个 svg 标签，里面有几个图片标签，像这样

<svg>
    <image fill-opacity="0.6" style="fill-opacity: 0.6; cursor: move;" xlink:href="http://mysite/arin/site/../pics/category/7/7.png" preserveAspectRatio="none" height="133" width="359.79999999999995" y="779.5" x="2033.5"></image>
</svg>

这是由插件生成的 http://www.graphdracula.net/ 制作 svg 图表。它让我可以拖动周围的节点。

但是我怎样才能在图像周围动态添加black 1px solidborder，并为其添加onclick事件，所以如果我点击它，就会发生一些事情，并且仍然保留拖动功能。

function showGraph(obj) {
    var width = $(document).width() * 3;
    var height = $(document).height() * 3;
    var g = new Graph();

    var categories = obj['category_data'];  
    for(var i=0; i<categories.length; i+=1) {
        var cat_data = categories[i];

        var id = cat_data['id'];
        var name = cat_data['name'];
        var images = cat_data['images'];

        var render = null;
        for(var j=0; j<images.length; j+=1) {
            var image = images[j];
            if (image['approved']==1 && image['main']==1) {
                var info = image['info'];
                var link = info['elink'];
                var ow = info['width'];
                var oh = info['height'];

                var w = 150;
                var h = (w*oh) / ow;
                var w = ow*0.7;
                var h = oh*0.7;

                render = getRenderer(link, w, h);
                break;
            }
        }

        g.addNode(id, { label : name, render : render });
    }
    for(var i=0; i<categories.length; i+=1) {
        var cat_data = categories[i];
        var id = cat_data['id'];
        var pid = cat_data['parent_id'];
        if (pid != 0) {
            g.addEdge(pid, id, { directed : true });
        }
    }

    var layouter = new Graph.Layout.Spring(g);

    var renderer = new Graph.Renderer.Raphael('canvas', g, width, height);

    var images = $("image");
    images.css("border", "1px solid black");
    images.dblclick(function() {
        alert(1);
    });
}

function getRenderer(link, w, h) {
    return function(r, n) {
        var set = r.set().push(r.image(link, 10, 10, w, h));
        return set;
    };
}

Answer 1

根据这个答案：https://stackoverflow.com/a/13217794/1332068

stroke 不适用于 或 ，仅适用于形状和文本。

您不能向 SVG 图像添加描边。您必须创建一个与图像路径和位置相同的矩形，然后用笔划勾勒矩形。