Safari 无法正确显示 svg（透明背景显示为黑色）答案

【问题标题】：Safari not showing svg correctly (transparent background showing as black)Safari 无法正确显示 svg（透明背景显示为黑色）
【发布时间】：2021-04-29 09:36:15
【问题描述】：

我在一个透明的 html 页面上显示了一个 svg。在它的后面有一个渐变背景。这在 chrome 中正确显示（见下文）：

但是，在 safari 中，svg 的背景不是透明的，而是看起来是黑色的（见下文）。有什么想法吗？

以下代码用于 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>

这是我用来渲染图像的 HTML（在 reactJS 中）：

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

请看下面的样式：

.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);
    }
}

【问题讨论】：

请提供代码
已添加代码

标签： html css svg

【解决方案1】：

解决方案 1：CSS

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

解决方案 2：将 `fill-opacity` 设置为 `0` 为 `rect#Rectangle_643`

注意：仅适用于内联 SVG。

HTML

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

来源： MDN Docs: Fills and Strokes

【讨论】：

对不起，这不起作用....我尝试了两种解决方案，但都没有成功。

【解决方案2】：

在您的情况下，只需将 clip-path="url(#clip-path)" 更改为 clip-path="url(/pageUrl#clip-path) " 只是你需要在 clip-path 之前添加 pageUrl。

【讨论】：

解决方案 1：CSS

解决方案 2：将 fill-opacity 设置为 0 为 rect#Rectangle_643

解决方案 2：将 `fill-opacity` 设置为 `0` 为 `rect#Rectangle_643`