html - 用 svg 中的透明路径重叠彩色矩形/在与路径的交叉点上破坏矩形填充颜色

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>

在路径样式中使用任何填充值都会产生相同的结果。使用描边可以保持路径内部确定但背景为黑色！

标签： htmlsvgpathtransparency

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

• 从上一点到点 {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>标签内添加原始路径点。

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