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>

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

但是如何在图片周围动态添加black 1px solid border，并为其添加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不适用于＆lt; image＆gt;或者＆lt; use＆gt;，只有形状和文字。

您无法为SVG图像添加笔触。您必须创建一个具有相同路径和图像位置的矩形，然后用笔划勾勒出矩形。

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

1 个答案: