在Safari中，svg蒙版看起來像光柵一樣模糊-有解無憂

在 Safari 中但不在 Chrome 中，在 svg 圖示上應用 svg 掩碼會呈現模糊的邊緣。我創建了最小的可重現示例……至少我希望它是可重現的。因為這種效果不是恒定的：

頁面無關部分的一些隨機更改可以“修復”錯誤。
在這些更改之后，如果我重繪頁面 - 錯誤會隨機消失或重新出現。有時，當我復制一個選項卡，或者在地址欄中手動輸入 URL 時在新選項卡中打開頁面，或者當我打開一個新的私人視窗時，會發生切換??。可能是一些快取魔法。

我已經在 15.6.1 和 16.4 的桌面以及各種 Apple 移動設備的網路視圖中嘗試過它。

實際結果：

在 Safari 中，svg 蒙版看起來像光柵一樣模糊

預期結果：

在 Safari 中，svg 蒙版看起來像光柵一樣模糊

<html>
<head>
    <style>
    .logo {
        width: 96px;
        height: 96px;
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-image:
            url(data:image/svg xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI PG1hc2sgaWQ9ImEiIHN0eWxlPSJtYXNrLXR5cGU6YWxwaGEiIG1hc2tVbml0cz0idXNlclNwYWNlT25Vc2UiIHg9IjAiIHk9IjAiIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCI PHBhdGggZD0iTTQ4IDI0YzAgMTkuMjA1LTQuNzk1IDI0LTI0IDI0UzAgNDMuMjA1IDAgMjQgNC43OTUgMCAyNCAwczI0IDQuNzk1IDI0IDI0eiIgZmlsbD0iI2ZmZiIvPjwvbWFzaz48ZyBtYXNrPSJ1cmwoI2EpIj48cGF0aCBmaWxsPSIjMDAwIiBkPSJNMCAwaDQ4djQ4SDB6Ii8 PC9nPjwvc3ZnPg==);
        mask-image:
            url(data:image/svg xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI PG1hc2sgaWQ9ImEiIHN0eWxlPSJtYXNrLXR5cGU6YWxwaGEiIG1hc2tVbml0cz0idXNlclNwYWNlT25Vc2UiIHg9IjAiIHk9IjAiIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCI PHBhdGggZD0iTTQ4IDI0YzAgMTkuMjA1LTQuNzk1IDI0LTI0IDI0UzAgNDMuMjA1IDAgMjQgNC43OTUgMCAyNCAwczI0IDQuNzk1IDI0IDI0eiIgZmlsbD0iI2ZmZiIvPjwvbWFzaz48ZyBtYXNrPSJ1cmwoI2EpIj48cGF0aCBmaWxsPSIjMDAwIiBkPSJNMCAwaDQ4djQ4SDB6Ii8 PC9nPjwvc3ZnPg==);
        background-image:
            url(data:image/svg xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI PHBhdGggZmlsbD0iIzAwMCIgZD0iTTAgMGgyMHYyMEgweiIvPjwvc3ZnPg==);
            background-size: cover;
    }
    </style>
</head>
<body>
    <div class="logo"/>
</body>
</html>

SVG

面具：

<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0_16513_8424" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="48" height="48">
<path d="M48 24C48 43.2052 43.2052 48 24 48C4.79475 48 0 43.2052 0 24C0 4.79475 4.79475 0 24 0C43.2052 0 48 4.79475 48 24Z" fill="white"/>
</mask>
<g mask="url(#mask0_16513_8424)">
<rect width="48" height="48" fill="black"/>
</g>
<defs>
</defs>
</svg>

圖示：

<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="20" height="20" fill="#000000"/>
</svg>

uj5u.com熱心網友回復：

顯然，野生動物園在mask-images包含蒙面元素方面存在問題。

幸運的是，你可以簡化你的面具：

顯示代碼片段

.logo {
  width: 96px;
  height: 96px;
  background: #000;
  display: inline-block;
  mask-size: contain;
  -webkit-mask-size: contain;
  -webkit-mask-image:url("data:image/svg xml,");
}

.logo2 {
  width: 96px;
  height: 96px;
  background: #000;
  display: inline-block;
  mask-size: contain;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("data:image/svg xml,");
     
}

<p>Original</p>
<div class="logo"></div>
<p>Fixed</p>
<div class="logo2"></div>

您的 mask svg 可以簡化為 mask 形狀本身：

<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
  <path d="M48 24c0 19.205-4.795 24-24 24S0 43.205 0 24 4.795 0 24 0s24 4.795 24 24z" fill="#000" />
</svg>

你也可以使用Yoksel 的 data-URL 轉換器。
這樣，您的資料 URL 更具可讀性。

uj5u.com熱心網友回復：

Safari 在調整 SVG 影像大小時會出現一些問題，以防viewBox缺少該屬性。
我不知道這是預期的行為還是某種錯誤。但它現在已經存在了一段時間。
在上面的示例中添加屬性，修復了該行為，并且蒙版獲得了清晰的邊緣。

不知道為什么您頁面上的其他更改似乎隨機“修復”或“破壞”蒙版（就模糊而言）。

你的 SVG

<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="none">
...
</svg>

具有視口屬性

<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="none" viewbox="0 0 48 48">
...
</svg>

以及基于您的代碼的作業示例

<html>
<head>
    <style>
    .logo {
        width: 96px;
        height: 96px;
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-image:
            url(data:image/svg xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgZmlsbD0ibm9uZSIgdmlld2JveD0iMCAwIDQ4IDQ4Ij48bWFzayBpZD0iYSIgc3R5bGU9Im1hc2stdHlwZTphbHBoYSIgbWFza1VuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeD0iMCIgeT0iMCIgd2lkdGg9IjQ4IiBoZWlnaHQ9IjQ4Ij48cGF0aCBkPSJNNDggMjRjMCAxOS4yMDUtNC43OTUgMjQtMjQgMjRTMCA0My4yMDUgMCAyNCA0Ljc5NSAwIDI0IDBzMjQgNC43OTUgMjQgMjR6IiBmaWxsPSIjZmZmIi8 PC9tYXNrPjxnIG1hc2s9InVybCgjYSkiPjxwYXRoIGZpbGw9IiMwMDAiIGQ9Ik0wIDBoNDh2NDhIMHoiLz48L2c PC9zdmc );
        mask-image:
            url(data:image/svg xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgZmlsbD0ibm9uZSIgdmlld2JveD0iMCAwIDQ4IDQ4Ij48bWFzayBpZD0iYSIgc3R5bGU9Im1hc2stdHlwZTphbHBoYSIgbWFza1VuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeD0iMCIgeT0iMCIgd2lkdGg9IjQ4IiBoZWlnaHQ9IjQ4Ij48cGF0aCBkPSJNNDggMjRjMCAxOS4yMDUtNC43OTUgMjQtMjQgMjRTMCA0My4yMDUgMCAyNCA0Ljc5NSAwIDI0IDBzMjQgNC43OTUgMjQgMjR6IiBmaWxsPSIjZmZmIi8 PC9tYXNrPjxnIG1hc2s9InVybCgjYSkiPjxwYXRoIGZpbGw9IiMwMDAiIGQ9Ik0wIDBoNDh2NDhIMHoiLz48L2c PC9zdmc );
        background-image:
            url(data:image/svg xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI PHBhdGggZmlsbD0iIzAwMCIgZD0iTTAgMGgyMHYyMEgweiIvPjwvc3ZnPg==);
            background-size: cover;
    }
    </style>
</head>
<body>
    <div class="logo"/>
</body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/526685.html

標籤：cssIOSsvg苹果浏览器

上一篇：手風琴中的SVG在活動時不會保持一致

下一篇：在選單上選擇不同選項時更改SVG填充