如何在svg标签内的图像标签上放置边框和超链接
How to put a border and hyperlink on a image tag inside a svg tag?
我有一个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图像中添加笔画。您必须创建一个与图像具有相同路径和位置的矩形,然后用描边勾勒出矩形的轮廓。
相关文章:
- 在<页眉>标签
- Ckeditor-plugin:插入虚假元素add不情愿<p>标签前后
- 如果我在javascript中输入无效的电子邮件或空白,如何显示特定的文本框边框红色
- iframe正在添加标签,需要删除它们
- 如何自动调整标签的高度以适应内容
- Jquery标签插件粘贴问题
- Twitter引导程序Typeahead-Id&标签
- Highcharts-如何在自定义格式化程序中获得默认的y轴标签格式化程序
- Morris.js折线图x轴标签在调整大小后消失
- JavaScript goto 标签如何使用内部循环
- 显示某个用户ID的某个标签的30张Instagram图片
- 标签客户端的设置值
- jQuery动画-边框宽度和颜色
- 如何在单击区域 HREF 标签时创建活动事件(更改 BG 或创建边框)
- 隐藏透明标签后面的边框
- 使用Javascript为输入字段添加边框样式颜色(提交时没有值),该字段已经在css中带有!important标签的边
- 在 img 标签上叠加图形边框
- 如何在svg标签内的图像标签上放置边框和超链接
- jQuery控制标签的边框颜色
- 如何在剑道UI中增加选择标签的边框宽度