我有一个类似于以下内容的代码，由动态内容创建工具生成，即该工具的用户将根据需要选择颜色。当矩形已着色但路径内部是透明的时，会出现此问题，因此矩形的颜色将填充路径内的所有部分。目标是显示应按原样着色的矩形，但避免在路径透明时对路径的内部部分着色，而是可以显示此透明部分后面的潜在对象。
<svg xmlns="http://www.w3.org/2000/svg" style="position: absolute;" id="id2_svg" >
<g id="id2_g" >
<rect id="id2_rect" style="fill:rgba(255 , 255 , 0 , 255);" />
<path id="id2_path" d="M 32.0 2.0 C 6.0 -2.0 -10.0 71.0 13.0 89.0 C 36.0 107.0 168.0 125.0 171.0 111.0 C 174.0 96.0 58.0 6.0 32.0 2.0" style= "fill: #fff; fill-opacity: 0; pointer-events: visiblePainted" />
</g>
</svg>在路径样式中使用填充值将给出相同的结果。使用笔画可以保持路径内部确定，但具有黑色背景！
OP 正在添加以下注释：
有没有办法打破与路径相交处的矩形填充？
您可以像这样裁剪矩形：
<svg viewBox="0 0 300 150" >
<defs>
<clipPath id="clip">
<path id="id2_path" d="M 32.0 2.0 C 6.0 -2.0 -10.0 71.0 13.0 89.0 C 36.0 107.0 168.0 125.0 171.0 111.0 C 174.0 96.0 58.0 6.0 32.0 2.0" />
</clipPath>
</defs>
<g id="id2_g" >
<rect id="id2_rect" style="fill:rgba(255 , 255 , 0 , 255);" width="100" height="100" clip-path="url(#clip)" />
<use xlink:href="#id2_path" stroke="black" fill="none"/>
</g>
</svg>OP评论说：
实际上我想要的是相反的。通过使用剪辑路径，我剪裁了路径的外部，即就像使其透明一样，但我想要的是剪裁路径内部并使其透明，同时保持矩形其余部分的颜色不变。无论如何，感谢您的回答！
在这种情况下，我建议使用修改后的路径。对于原始d属性，我将添加以下内容：M0,0H300V150H0V0z.我希望这是你需要的。
<svg viewBox="0 0 300 150" >
<defs>
<clipPath id="clip">
<path id="id2_path" d="M 32.0 2.0 C 6.0 -2.0 -10.0 71.0 13.0 89.0 C 36.0 107.0 168.0 125.0 171.0 111.0 C 174.0 96.0 58.0 6.0 32.0 2.0
M0,0H300V150H0V0z" />
</clipPath>
</defs>
<g id="id2_g" >
<rect id="id2_rect" style="fill:rgba(255 , 255 , 0 , 255);" width="100" height="100" clip-path="url(#clip)" />
<path id="id2_path" d="M 32.0 2.0 C 6.0 -2.0 -10.0 71.0 13.0 89.0 C 36.0 107.0 168.0 125.0 171.0 111.0 C 174.0 96.0 58.0 6.0 32.0 2.0" stroke="black" fill="none" />
</g>
</svg>更新：
这应该对我有所帮助，但您能否详细解释为什么将其添加到原始路径中
通过向路径添加M0,0H300V150H0V0z，您可以绘制一个与 svg 画布一样大的矩形 矩形以相反的意义绘制。在本例中，您将从左到右绘制路径，从右到左绘制添加的矩形。这样，您可以创建一个带有孔的矩形，并将以下形状用于剪辑路径：
添加字符串的模仿：M0,0H300V150H0V0z
-
移至 SVG 画布的原点
M0,0 -
从前一点到点 {300,0}
H300的水平线 -
从前一点到点 {300,150}
V150的垂直线 -
从前一点到点 {0,150}
H0的水平线 -
从前一点到点 {0,0}
V0的垂直线 -
关闭路径：
z
<svg viewBox="0 0 300 150" >
<path id="id2_path" d="M 32.0 2.0 C 6.0 -2.0 -10.0 71.0 13.0 89.0 C 36.0 107.0 168.0 125.0 171.0 111.0 C 174.0 96.0 58.0 6.0 32.0 2.0 M0,0H300V150H0V0z" />
</svg>以及为什么您再次在
<g>标记中添加原始路径点。
因为现在用于剪辑路径的路径看起来与添加的字符串不同。