SVG clipPath 显示带有透明填充的黑色背景

Question

对于具有 fill="transparent" 的 SVG 路径，预计无论如何都不会显示。

<path d="M 0 40 L 200 40 L 200 70 L 0 70 L 0 40 Z" fill="transparent" fill-opacity="1" stroke="none"></path>

如果它没有如上所示的剪辑路径，或者只有一个剪辑路径，则效果很好。

但是当它有一个 clip-path 也有 clip-path 时，它会显示黑色背景，这对我的情况来说并不理想。

这是 SVG：

    <svg width="1000" height="800">
     <path id="rect" d="M 0 40 L 200 40 L 200 70 L 0 70 L 0 40 Z" fill="transparent" fill-opacity="1" 
        stroke="none" clip-path="url(#zr-clip-2)"></path>
      <defs>
        <clipPath id="zr-clip-2" clip-path="url(#zr-clip-1)">
          <path d="M 30 10 L 50 10 L 50 180 L 30 180 L 30 10 Z" fill="#ff0" fill-opacity="1" stroke="none"></path>
        </clipPath>
        <clipPath id="zr-clip-1">
          <path d="M 40 50 L 60 50 L 60 75 L 40 75 L 40 50 Z" fill="#0f0"></path>
        </clipPath>
      </defs>
    </svg>

我想让带id="rect"的路径在填充不透明时夹在zr-clip-1和zr-clip-2的交点处，透明时不显示任何内容。

但是，它显示的是黑色背景，并且与填充为红色时的大小不一样：

<svg width="1000" height="800">
  <path d="M 0 40 L 200 40 L 200 70 L 0 70 L 0 40 Z" fill="transparent" fill-opacity="1" stroke="none" clip-path="url(#zr-clip-2)"></path>
  <path d="M 0 40 L 200 40 L 200 70 L 0 70 L 0 40 Z" fill="red" fill-opacity="1" stroke="none" clip-path="url(#zr-clip-2)"></path>
  <defs>
    <clipPath id="zr-clip-2" clip-path="url(#zr-clip-1)">
      <path d="M 30 10 L 50 10 L 50 180 L 30 180 L 30 10 Z" fill="#ff0" fill-opacity="1" stroke="none"></path>
    </clipPath>
    <clipPath id="zr-clip-1">
      <path d="M 40 50 L 60 50 L 60 75 L 40 75 L 40 50 Z" fill="#0f0"></path>
    </clipPath>
  </defs>
</svg>

Answer 1

这似乎是一个 Chrome 错误：https://bugs.chromium.org/p/chromium/issues/detail?id=659790

暂时可以设置fill=rgba(0, 0, 0, 0.002)隐藏元素。

SVG clipPath 显示带有透明填充的黑色背景

SVG clipPath showing black background with transparent fill

svg

clip-path