带有 CSS SVG 背景图像的按钮不会显示在 Safari/Webkit IOS 或 MacOS 上答案

【问题标题】：Button with CSS SVG background image does not show up on Safari/Webkit IOS or MacOS带有 CSS SVG 背景图像的按钮不会显示在 Safari/Webkit IOS 或 MacOS 上
【发布时间】：2021-05-31 10:11:18
【问题描述】：

我正在使用 IIS10 来提供网页和 ASP.NET Webforms。我有一个带有一系列工具栏按钮的 HTML 页面。这些按钮在 SVG 中具有遮罩的 CSS 背景，以呈现工具栏图标。

按钮在 Windows Edge (Chromium)、Chrome 等以及 MacOS 上的 Chrome 中按预期呈现。但是，在 MacOS Safari、应用程序中的 WebKit 页面以及 iOS Safari 和应用程序中，按钮不会呈现图像。我根据SVG in CSS backgrounds not showing up in Safari 链接检查了 MIME 类型，并将其正确设置为 image/svg+xml 用于 svg 文件扩展名。示例如下：

HTML：

    <button id="print" class="toolbarButton print hiddenMediumView" title="Print" tabindex="33" data-l10n-id="print">
        <span data-l10n-id="print_label">Print</span>
    </button>

CSS：

.toolbarButton.print::before {
    -webkit-mask-image: url(images/toolbarButton-print.svg);
    -webkit-mask-image: var(--toolbarButton-print-icon);
    mask-image: url(images/toolbarButton-print.svg);
    mask-image: var(--toolbarButton-print-icon);
}
[snip]
--toolbarButton-print-icon: url(images/toolbarButton-print.svg);

有没有人遇到过这种情况，如果有，有解决办法吗？

谢谢！！！

【问题讨论】：

标签： html css svg safari webkit

【解决方案1】：

问题在于重复的-webkit-mask-image CSS 标签，一个带有url，另一个带有指向url 的var。

修复方法是用var 删除第二个-webkit-mask-image - 然后掩码完美工作。

【讨论】：