SVG - Как обрезать изображение по кругу?

Я немного похож на SVG, но я играл с D3 и начал разбираться в основах.

То, что я пытаюсь достичь, - это сделать квадратное изображение и обрезать его в круг, который будет представлять собой node на дереве, который я пытаюсь сделать.

Мне удалось достичь этого эффекта, создав шаблон для каждого изображения, а затем заполнив узлы шаблоном. Однако производительность этого подхода была ужасной, когда на дереве было больше, чем несколько узлов.

Итак, я ищу другой подход. Я могу поместить обычный объект "image" в качестве своих узлов, но они просто выходят как простые прямоугольники, очевидно, и я хотел бы отображать их как круги. У кого-нибудь есть рекомендации о том, как маскировать/обрезать изображение для достижения эффекта, который я хочу, сохраняя при этом производительность?

Ответ 1

Вы можете использовать путь клипа, как это:

<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>

Круг будет "вырезаться" из прямоугольника.

Ответ 2

Если вы хотите сгенерировать тот же HTML-код, что и в @Thomas, ответьте программно на D3, вы можете сделать следующее:

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)");