Question

我有一些在中心有图标的块，使用mask和svg创建。一切正常，请看第一张截图。

现在我的程序从web服务器通过ajax加载某些设置，它返回一些预先构建的css，应该用不同的svg替换svg，但是我得到的是svg应该是的空白区域，见图2。

当CSS从服务器返回时，jQuery用于将其添加到本地文档<head>以覆盖主要样式。

加载页面的初始css如下：

#dashboard-items li .dashboard-icon.dashboard-icon-news span.the-icon{
    -webkit-mask: url(../img/icons/news.svg) no-repeat center / contain;
    mask: url(../img/icons/news.svg) no-repeat center / contain;
}

通过ajax调用在服务器上返回的PHP代码返回的CSS如下：

#dashboard-items li .dashboard-icon.dashboard-icon-news span.the-icon{
    -webkit-mask: url(../img/icons/placeholder.svg) no-repeat center / contain;
    mask: url(../img/icons/placeholder.svg) no-repeat center / contain;
}

所以你可以看到CSS几乎一样，而且placeholder.svg与news.svg存在于同一个本地文件夹中 - 那么为什么我只是得到一个黑色区域而不是显示图标？如果我手动编辑本地CSS，图标会改变，所以svg显然正常工作。

此外，当我在野生动物园检查时，它说：

值“url（../ img / icons / placeholder.svg）无重复中心/ 包含“此属性不支持

显然支持它，因为我在ajax调用之前使用它。

如果动态添加CSS到文档标题

0 个答案: