SVG-如何将图像裁剪为圆形? [英] SVG - How to crop an image to a circle?

问题描述

我对SVG有点陌生，但是我一直在玩D3，并开始不理解其基础知识.

I am somewhat of a noob to SVG, but I've been playing with D3 and have started to undestand the basics.

我想要实现的是拍摄一个正方形图像并将其裁剪为一个圆形-这将代表我要绘制的树上的一个节点.

What I am trying to achieve is to take a square image and crop it to a circle - which is going to be representing a node on tree I am trying to draw.

我能够通过为每个图像创建一个图案，然后用该图案填充节点来达到这种效果.但是，当树上有多个节点时，这种方法的性能将很糟糕.

I was able to achieve this effect by creating a pattern for each image, then filling the nodes with the pattern. However, the performance on this approach was terrible when there are more than a handfull of nodes on the tree.

因此，我正在寻找一种不同的方法.我可以在其中放置一个常规的图像"对象作为节点，但是显然它们只是以纯矩形形式出现，我想将它们渲染为圆形.任何人都可以在保持性能的同时如何蒙版/裁剪图像以达到我想要的效果?

So, I am looking for a different approach. I can put a regular "image" object in as my nodes, but they just come out as plain rectangles, obviously, and I'd like to render them as circles. Anyone have any advice on how to either mask/crop the image to achieve the effect I want while maintaining performance?

推荐答案

您可以像这样使用剪切路径， a>:

You can use a clip path, 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>

将从矩形中切出"一个圆.

A circle will be "cut out" from the rectangle.

这篇关于SVG-如何将图像裁剪为圆形?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！