D3.js: Круговой обтравочный контур не работает?

Я как бы новичок в этом форуме, я использую его все время через поисковые запросы Google, которые очень помогают мне, но я наткнулся на довольно необычную проблему, я думаю. Я пытаюсь создать обтравочную маску из круга. Я вставлял код (отредактированный, чтобы быть более читаемым) здесь, любая помощь приветствуется.D3.js: Круговой обтравочный контур не работает?

В результате должен быть серый круг, вместо желтого круга.

var circles = svg.selectAll("circleMale") 
     .attr("id", "ellipse-clip") 
     .data(exhibits) 
     .enter() 
     .append("svg:circle") 

     //.attr("title", function(d) { return nameFn(d); }) 
     //.attr("fill", "#CCCCCCC") 
     .attr("fill", "#FFFF00") 

     .attr("stroke-width", 3) 
     .attr("stroke", "#FFFFFF") 
     .attr("r",100) 
     .attr("cx",500) 
     .attr("cy",500) 
     .attr("opacity", 0.2) 

    var clippingPath = svg.append("rect")  
     .attr("x", 125)  
     .attr("y", 75)   
     .attr("clip-path", "url(ellipse-clip)") 
     .style("fill", "lightgrey") 
     .attr("height", 600)  
     .attr("width", 800);

источник

2016-02-24 B.Wesselink

Любые комментарии о некоторых ошибках, которые я сделал, приветствуются также! –

У вас есть несколько проблем:

клип-путь должен указывать на clipPath element, а не круг
url(ellipse-clip) неправильно, оно должно быть url(#ellipse-clip)

источник

2016-02-24 13:42:28

Благодарим за быстрый ответ! Что вы подразумеваете под элементом элемента? Я дал моим кружкам идентификатор с именем «эллипс-клип», но я думаю, что этого достаточно? –

В моем ответе вы пропустили ключевое слово ** clipPath **. –

Хм, я пытаюсь получить то, что вы говорите, но это не имеет смысла для меня :(, я не могу указать, что мой обтравочный контур к кругу, но его круг, который я хочу закрепить. Где еще я должен его указывать? –

D3.js: Круговой обтравочный контур не работает?

ответ

Смежные вопросы