SVG-如何将图像裁剪成圆形？

我对SVG有点不屑一顾，但我一直在玩D3，并且已经开始不理解其基本原理

我想做的是把一个正方形的图像裁剪成一个圆圈，这个圆圈代表我想画的树上的一个节点

我能够通过为每个图像创建一个模式，然后用该模式填充节点来实现这种效果。然而，当树上的节点超过一把时，这种方法的性能非常糟糕

因此，我正在寻找一种不同的方法。我可以把一个普通的“图像”对象作为节点放进去，但它们显然是普通的矩形，我想把它们渲染成圆形。有人对如何在保持性能的同时遮罩/裁剪图像以达到我想要的效果有什么建议吗？

您可以使用剪辑路径：

---

将从矩形中“剪切”出一个圆。

如果您希望通过D3编程生成与@Thomas的答案中相同的html代码，可以执行以下操作：

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

---

我使用它将圆角创建到一个组中，因为css边框半径不适用于svg元素。

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