CODEWITHSUNDEEP
svgclip-path
Ovilia
Ovilia

Reputation: 7310

SVG clipPath showing black background with transparent fill

For an SVG path having a fill="transparent", it is expected not to be shown anyway.

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

It works well if it doesn't have a clip-path as show above, or have a single clip-path.

But when it has a clip-path also with clip-path, it will show black background, which is not ideal for my case.

Here's the 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>

I want the path with id="rect" to clip with the intersection of zr-clip-1 and zr-clip-2 when its fill is not transparent, and show nothing when it's transparent.

But instead, it shows black background and it's not even with the same size as that when fill is red:

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

Upvotes: 2

Views: 2313

Answers (1)

Ovilia
Ovilia

Reputation: 7310

This seems to be a Chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=659790

For the time, you may set fill=rgba(0, 0, 0, 0.002) to hide the element.

Upvotes: 2

Related Questions