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

How to put a border and hyperlink on a image tag inside a svg tag?

本文关键字:标签 边框 超链接 svg 图像      更新时间:2023-09-26

我有一个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 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;
    };
}

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

描边不适用于<或者使用>,只使用形状和文本。

不能在SVG图像中添加笔画。您必须创建一个与图像具有相同路径和位置的矩形,然后用描边勾勒出矩形的轮廓。