D3 заполните форму с помощью рисунка с использованием рисунка

Question

Я пытаюсь создать круговой аватар с D3.js, но я не могу получить изображение, которое будет отображаться в моем кругу. Я использую svg pattern 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"); 

Answer 1

«Fill» является свойство стиля, вы должны использовать CSS url() обозначения для ссылки на элемент рисунка.

Как только вы исправите это, вы обнаружите, что у вас также есть неправильные размеры, если только вы не намерены иметь четыре копии аватара, выложенного в круге!

P.S. Обычно я бы оставил это так же, как комментарий, и отметил это для закрытия как простой опечаткой, но я хотел бы попробовать Stack Snippets:

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", 'http://placekitten.com/g/48/48') 
 
    .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/2) 
 
     .attr("cy", config.avatar_size/2) 
 
     .attr("r", config.avatar_size/2) 
 
     .style("fill", "#fff") 
 
     .style("fill", "url(#grump_avatar)");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>