具有 CSS SVG 背景图像的按钮未显示在 Safari/Webkit IOS 或 MacOS 上

Question

我正在使用 IIS10 来提供网页和 ASP.NET 网络表单。我有一个带有一系列工具栏按钮的 HTML 页面。这些按钮在 SVG 中屏蔽了 CSS 背景以显示工具栏图标。

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

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

有没有人运行参与其中，如果有，有解决方案吗？

谢谢！！！

Answer 1

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

修复方法是用 var 删除第二个 -webkit-mask-image -- 然后蒙版就可以正常工作了。

具有 CSS SVG 背景图像的按钮未显示在 Safari/Webkit IOS 或 MacOS 上

Button with CSS SVG background image does not show up on Safari/Webkit IOS or MacOS

html

css

safari

svg

webkit