javascript - 在 JavaScript 上将图像背景设置为形状

Question

我要拿this示例并将每个精子的颜色更改为图像。

在示例中，他们将所有精子涂成白色，我想放一张图片。

我该怎么做？

我有一个 android 应用程序，我应该向它添加脚本，所以我在 Eclipse 上工作，并将图像保存在 Assets 文件夹中。

如果我将背景更改为图像效果很好，但每次更改精子背景的尝试都不适合我。

感谢您的帮助!

编辑 1:

这是在 CSS 中进行的尝试:

ellipse {
    background-image:url('head.png');
    background-repeat: no-repeat;
    background-size: cover;
}

这是尝试在脚本中完成

var head = g.append("ellipse")
    .attr("rx", 26.5)
    .attr("ry", 24)
    .attr("xlink:href", "/assets/head.png");

Answer 1

你必须使用 svg:image 而不是椭圆

var head = g.append("svg:image")
    .attr('x',-11)
    .attr('y',-11)
    .attr('width', 22)
    .attr('height', 22)
    .attr("xlink:href","http://www.sherv.net/cm/emoticons/smile/super-smile-smiley-emoticon.gif")

演示:http://jsfiddle.net/qK9K8/2/