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

Question

我对SVG有点生疏，但我一直在使用D3进行尝试并开始了解其基础知识。

我想要实现的是将正方形图像裁剪成圆形 - 这将代表我正在尝试绘制的树上的节点。

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

因此，我正在寻找另一种方法。我可以将常规的“图像”对象放入我的节点中，但它们只会变成普通的矩形，显然，我想将它们渲染为圆形。有人知道如何裁剪图像以实现我想要的效果，并保持性能吗？

- Eugene

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

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

- Thomas W

---

我使用这个代码 http://jsfiddle.net/thiagomata/mp28rnj6/1/ 来将圆角应用到一个组中，因为CSS的border-radius属性无法作用于SVG元素。 - Thiago Mata

Answer 2

如果你想要使用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)");

- martin36

Answer 3

在2023年，您可以使用CSS的clip-path：

<svg width="100" height="100">
  <rect width="100" height="100" fill="green" style="clip-path: inset(0 0 0 0 round 50%);"/>
</svg>

- gustavopch