Question

我有一个类似于以下代码的代码，它是由动态内容创建工具生成的，即该工具的用户将根据需要选择颜色。当矩形着色但路径内部是透明的时，会出现问题，因此矩形的颜色将填充路径内的所有部分。目的是显示应为矩形的颜色，但在透明时避免对路径的内部着色，而是可以显示此透明部分后面的潜在对象。

    <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>

在路径样式中使用填充值都会产生相同的结果。使用笔触可以确定路径的内部，但背景为黑色！

Answer 1

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画布一样大的矩形。以相反的方式绘制矩形。在这种情况下，您将从左到右绘制路径，并从右到左绘制添加的矩形。这样，您将创建一个带孔的矩形，并将此形状用于clipPath：

添加的字符串的模仿：M0,0H300V150H0V0z

移动到svg画布M0,0
从上一个点到点{300,0} H300
从上一个点到点{300,150} V150
从上一个点到点{0,150} H0

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>标签内添加原始路径。

因为现在用于clipPath的路径与添加的字符串看起来不同。

在路径上与svg重叠的彩色rect与svg中的透明路径/破坏rect填充颜色相交

1 个答案:

更新：