html - Safari not showing svg correctly (transparent background showing as black)

Question

I have an svg displaying on a html page which is transparent. Behind it there is a gradient background. This displays correctly in chrome (see below):

However, in safari, the background of the svg isn't transparent, rather, it seems to be black (see below). Any ideas?

The below code is for the svg:

    <svg id="Component_9_2" data-name="Component 9 – 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" viewBox="0 0 989 1079">
  <defs>
    <clipPath id="clip-path">
      <rect id="Rectangle_643" data-name="Rectangle 643" width="989" height="1079" transform="translate(689.266 1)" fill="#fff" stroke="#707070" stroke-width="1"/>
    </clipPath>
  </defs>
  <g id="Mask_Group_2" data-name="Mask Group 2" transform="translate(-689.266 -1)" clip-path="url(#clip-path)">
    <rect id="Rectangle_635" data-name="Rectangle 635" width="1014" height="1080" transform="translate(1703.266 1080) rotate(180)" fill="url(#linear-gradient)"/>
    <rect id="Rectangle_636" data-name="Rectangle 636" width="923" height="176" rx="88" transform="translate(927.532 464.851) rotate(160)" fill="rgba(255,255,255,0.24)"/>
    <rect id="Rectangle_637" data-name="Rectangle 637" width="923" height="176" rx="88" transform="translate(1175.532 605.851) rotate(160)" fill="rgba(255,255,255,0.24)"/>
    <rect id="Rectangle_638" data-name="Rectangle 638" width="923" height="176" rx="88" transform="translate(1465.532 732.851) rotate(160)" fill="rgba(255,255,255,0.24)"/>
  </g>
</svg>

And this is the HTML (in reactJS) that I use to render the image:

 <div className="login-graphic">
        <img src={graphic} alt="" className="rectangles" />
    </div>

See the styling below:

.login-graphic {
    background: transparent
        linear-gradient(
            229deg,
            #dbeaea 0%,
            #6ab4b4 -10%,
            #69b3b3 40%,
            #6ab3b3 45%,
            #008080 100%
        )
        0% 0% no-repeat padding-box;
    opacity: 1;
    transform: matrix(-1, 0, 0, -1, 0, 0);
    overflow-y: hidden;

    .rectangles {
        transform: matrix(-1, 0, 0, -1, 0, -40);
    }
}

question from:https://stackoverflow.com/questions/65887170/safari-not-showing-svg-correctly-transparent-background-showing-as-black

Answer 1

Solution 1: CSS

svg#Component_9_2 rect#Rectangle_643 {
    fill: none;
}

Solution 2: Set fill-opacity to 0 for rect#Rectangle_643

Note: Only works for inline SVG.

HTML

<rect id="Rectangle_643" fill-opacity="0"/>

Source: MDN Docs: Fills and Strokes