相关疑难解决方法(0)

D3使用图案填充图像

我正在尝试使用D3.js创建一个圆形化身,但我无法将我的图像显示在我的圈子中.我正在使用svg模式def尝试用图像填充圆圈.

谁能告诉我下面我做错了什么?谢谢.

var config = {
    "avatar_size" : 48
}

var body = d3.select("body");

var svg = body.append("svg")
        .attr("width", 500)
        .attr("height", 500);

var defs = svg.append('svg:defs');

defs.append("svg:pattern")
    .attr("id", "grump_avatar")
    .attr("width", config.avatar_size)
    .attr("height", config.avatar_size)
    .attr("patternUnits", "userSpaceOnUse")
    .append("svg:image")
    .attr("xlink:href", 'images/avatars/avatar_grumpy.png')
    .attr("width", config.avatar_size)
    .attr("height", config.avatar_size)
    .attr("x", 0)
    .attr("y", 0);

var circle = svg.append("circle")
        .attr("cx", config.avatar_size)
        .attr("cy", config.avatar_size)
        .attr("r", config.avatar_size)
        .style("fill", "#fff")
        .style("fill", "#grump_avatar");
Run Code Online (Sandbox Code Playgroud)

javascript svg d3.js

7
推荐指数
1
解决办法
1万
查看次数

标签 统计

d3.js ×1

javascript ×1

svg ×1