用其他元素填充SVG形状而不在边界处剪裁它们的最佳方法？

我需要创建几个SVG形状（如圆形或多边形），并用一些SVG元素填充每个形状

实现这一点的一种方法是定义形状并应用填充属性的模式（参见下面的代码片段）。但是，内部SVG元素由外部形状的边界剪裁（三角形由圆剪裁）

我想找到一种方法来隐藏所有与圆不相交的三角形，并保持边界溢出的三角形完好无损

请注意，在Javascript中计算元素是否与圆相交非常容易，但我需要创建具有复杂边界的形状，例如多边形

---

这是我的示例代码，但有点棘手（使用模式、掩码和过滤器）

这个答案现在对OP没有帮助。但无论如何，我还是要发布这篇文章，因为它可能会帮助未来的读者

下面的Javascript函数应该用任何模式填充任何形状。它使用新的SVG2

SVGSVGElement.checkIntersection（）

方法

不幸的是，

checkcrossion（）

在任何浏览器中都不能正常工作。该方法调用在Chrome中工作，但不能正确执行交叉测试。其他浏览器甚至还没有实现这个方法

函数fillShapeWithPattern（shapeId，patternId）
{
var shape=document.getElementById（shapeId）；
var pattern=document.getElementById（patternId）；
var svg=shape.ownerSVGElement；
var shapeBounds=shape.getBBox（）；
var patternBounds=pattern.getBBox（）；
如果（patternBounds.width==0 | | patternBounds.height==0）
return；//避免无限循环
//为了简化相交测试，让我们调整形状边界
//框，以便我们可以假装图案框位于（0,0）。
shapeBounds.x-=patternBounds.x；
shapeBounds.y-=patternBounds.y；
//交叉点测试所需的SVGRect对象
var testRect=svg.createSVGRect（）；
testRect.width=patternBounds.width；
testRect.height=patternBounds.height；
//在网格中循环检查矩形是否表示
//图案的边界框与形状相交
对于（变量y=形状块.y；
y<（形状块.y+形状块.高度）；
y+=模式边界（高度）
{
testRect.y=y+patternBounds.y；
对于（var x=shapeBounds.x；
x<（形状块.x+形状块.宽度）；
x+=图案边界宽度）
{
testRect.x=x+patternBounds.y；
if（svg.checkIntersection（shape，testRect））
{
//通过创建
//位于正确坐标的元素
var use=document.createElements（svg.namespaceURI，“use”）；
使用.setAttributeNS（“http://www.w3.org/1999/xlink“，”xlink:href“，”#“+patternId）；
use.setAttribute（“x”，x）；
use.setAttribute（“y”，y）；
appendChild（使用）；
}
}
}
}
填充图案（“形状”、“图案”）
谢谢，输出正是我所需要的，我必须研究您的解决方案，看看是否可以根据我的需要实施它。