SVG clipPfad mit schwarzem Hintergrund und transparenter Füllung

Question

Für einen SVG-Pfad mit fill="transparent" wird erwartet, dass er nicht angezeigt wird.

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

Es funktioniert gut, wenn es keinen Clip-Pfad wie oben gezeigt hat oder einen einzelnen Clip-Pfad hat.

Aber wenn es einen Clip-Pfad auch mit Clip-Pfad hat, wird es schwarzen Hintergrund zeigen, die nicht ideal für meinen Fall ist.

Hier ist der 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>

ich den Weg mit id="rect" wollen mit der Kreuzung von zr-clip-1 und zr-clip-2 befestigen, wenn seine Füllung nicht transparent ist, und nichts zeigen, wenn es transparent ist.

Aber stattdessen zeigt es schwarzen Hintergrund und es ist nicht einmal mit der gleichen Größe wie die, wenn Füllung rot ist:

<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

Dies scheint ein Chrome Bug zu sein: https://bugs.chromium.org/p/chromium/issues/detail?id=659790

Für die Zeit können Sie fill=rgba(0, 0, 0, 0.002) festlegen, um das Element auszublenden.