SVG - Jak przyciąć zdjęcie do koła?

Question

Jestem trochę noobem dla SVG, ale grałem z D3 i zacząłem podważać podstawy.

Próbuję osiągnąć obraz kwadratowy i przyciąć go do okręgu - który będzie reprezentował węzeł na drzewie, który próbuję narysować.

Udało mi się osiągnąć ten efekt, tworząc wzór dla każdego obrazu, a następnie wypełniając węzły wzorem. Jednak wydajność tego podejścia była straszna, gdy na drzewie jest więcej niż garść węzłów.

Poszukuję innego podejścia. Mogę umieścić zwykły obiekt "image" jako moje węzły, ale po prostu wychodzą one jak zwykłe prostokąty, a ja chciałbym je renderować jako kręgi. Czy ktoś ma jakieś porady, jak zamaskować/przyciąć obraz, aby osiągnąć pożądany efekt przy zachowaniu wydajności?

Answer 1

Można użyć ścieżkę klipu, like so:

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> 
    <clipPath id="clipCircle"> 
    <circle r="50" cx="50" cy="50"/> 
    </clipPath> 
    <rect width="100" height="100" clip-path="url(#clipCircle)"/> 
</svg> 

Koło będzie „wyciąć” z prostokąta.

Answer 2

Jeśli chcesz wygenerować ten sam kod HTML, jak w @ odpowiedź Thomasa programowo z D3 można wykonać następujące czynności:

var svg = d3.select("body").append("svg") 
    .attr("width", "100%") 
    .attr("height", "100%"); 

svg.append("clipPath") 
    .attr("id", "clipCircle") 
    .append("circle") 
    .attr("r", 50) 
    .attr("cx", 50) 
    .attr("cy", 50); 

svg.append("rect") 
    .attr("width", 100) 
    .attr("height", 100) 
    .attr("clip-path", "url(#clipCircle)");