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>

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

但是当它有一个带剪辑路径的剪辑路径时，它会显示黑色背景，这对我的情况来说并不理想。

这是SVG：

＆＃13;

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

＆＃13;

我希望id="rect"的路径在填充不透明的情况下剪切zr-clip-1和zr-clip-2的交集，并在透明时显示任何内容。

但相反，它显示黑色背景，并且它的大小与填充为红色时的大小不同：

＆＃13;

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

＆＃13;

Answer 1

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

当时，您可以设置fill=rgba(0, 0, 0, 0.002)来隐藏元素。

SVG clipPath显示黑色背景与透明填充

1 个答案: