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

Question

我有点像SVG的菜鸟,但我一直在玩D3并且已经开始了解基础知识.

我想要实现的是采取正方形图像并将其裁剪成圆形 - 这将代表我想要绘制的树上的节点.

我能够通过为每个图像创建一个模式,然后用模式填充节点来实现这种效果.但是,当树上有超过一小撮节点时,这种方法的性能非常糟糕.

所以,我正在寻找一种不同的方法.我可以把一个普通的"图像"对象作为我的节点,但它们只是作为普通的矩形出现,显然,我想将它们渲染为圆形.任何人都有关于如何在保持性能的同时屏蔽/裁剪图像以达到我想要的效果的任何建议？

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>

圆圈将从矩形中"切出".