我对 SVG 有点陌生,但我一直在玩 D3,并且开始不了解基础知识。
我想要实现的是拍摄一个方形图像并将其裁剪为一个圆圈 - 这将代表我正在尝试绘制的树上的一个节点。
我能够通过为每个图像创建一个图案,然后用图案填充节点来实现这种效果。但是,当树上有多个节点时,这种方法的性能很糟糕。
所以,我正在寻找一种不同的方法。我可以将一个常规的“图像”对象作为我的节点,但显然它们只是作为普通矩形出现,我想将它们渲染为圆形。有人对如何在保持性能的同时屏蔽/裁剪图像以达到我想要的效果有任何建议吗?
我对 SVG 有点陌生,但我一直在玩 D3,并且开始不了解基础知识。
我想要实现的是拍摄一个方形图像并将其裁剪为一个圆圈 - 这将代表我正在尝试绘制的树上的一个节点。
我能够通过为每个图像创建一个图案,然后用图案填充节点来实现这种效果。但是,当树上有多个节点时,这种方法的性能很糟糕。
所以,我正在寻找一种不同的方法。我可以将一个常规的“图像”对象作为我的节点,但显然它们只是作为普通矩形出现,我想将它们渲染为圆形。有人对如何在保持性能的同时屏蔽/裁剪图像以达到我想要的效果有任何建议吗?
您可以使用剪辑路径,如下所示:
<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>
将从矩形中“切出”一个圆圈。
如果您想使用 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)");