如何使用 Raphael JS 添加图像？答案

【问题标题】：How to add image with Raphael JS?如何使用 Raphael JS 添加图像？
【发布时间】：2015-07-29 10:40:24
【问题描述】：

嗨，这是我的 Raphael js，用于在地图 svg 上创建一些矩形

var rsr = Raphael('map', '600', '600');

var houses = [];

var houses_a = rsr.rect(433.6, 29.4, 100, 100);
houses_a.attr({x: '433.6',y: '29.4',fill: '#FFFFFF',stroke: '#000000',"stroke-width": '5',"stroke-miterlimit": '10','stroke-opacity': '1'}).data({'id': 'houses_a', 'house': 'House A'});
houses.push(houses_a);

我可以改变矩形的颜色

houses_a.node.setAttribute('fill', "red");

但是当尝试这样做时

houses_a.node.setAttribute('fill', "apple.png");

或

houses_a.node.setAttribute('src', "apple.png");

它不会起作用。

还有其他方法吗？

【问题讨论】：

标签： javascript svg raphael

【解决方案1】：

我不太清楚你为什么使用 element.node.setAttribute 而不是 element.attr();有时有原因，但从上面不确定。，

这取决于你实际想要做什么，如果有一个你想要的 jsfiddle 会有所帮助。

例如，您可以使用它...创建一个矩形/图像

var p = Raphael("paper", 800,800);

var img = p.image("http://svg.dabbles.info/tux.png", 10, 10, 300, 300)
           .attr({ "clip-rect": "20,20,300,300" });

jsfiddle

【讨论】：