如何用Raphael JS添加图片?

时间:2015-05-18 03:09:43

标签: javascript svg raphael

嗨,这是我的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");

它不起作用。

还有其他方法吗?

1 个答案:

答案 0 :(得分:0)

我不太清楚你为什么使用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