首页 \ 问答 \ CSS - 使用SVG掩码在Firefox中无法正确显示(CSS - Using SVG mask not displaying correctly in Firefox)

CSS - 使用SVG掩码在Firefox中无法正确显示(CSS - Using SVG mask not displaying correctly in Firefox)

我有以下HTML-

<span class="svg-star svg-finance"></span>

这是CSS: -

.svg-star {
    height: 50px;
    width: 50px;
    margin: 2px 5px;
    -webkit-mask:  url(../img/icon-favourite.svg) no-repeat 50% 50%;
    mask: url(../img/icon-favourite.svg) no-repeat 50% 50%;
    display: inline-block;
}
.svg-finance {
    background-color: #CFCABD;
}

但在Firefox中,它显示为图像的左侧,如在Safari,Chrome等中,它显示在右侧: -

在此处输入图像描述

知道我错过了什么吗?

Firefox中忽略了mask和webkit-mask。


I have the following HTML-

<span class="svg-star svg-finance"></span>

and here is the CSS:-

.svg-star {
    height: 50px;
    width: 50px;
    margin: 2px 5px;
    -webkit-mask:  url(../img/icon-favourite.svg) no-repeat 50% 50%;
    mask: url(../img/icon-favourite.svg) no-repeat 50% 50%;
    display: inline-block;
}
.svg-finance {
    background-color: #CFCABD;
}

But in Firefox it appears as the left side of the image where as in Safari, Chrome etc it appears correctly as per the right side:-

enter image description here

Any idea what I am missing?

The mask and webkit-mask are both ignored in Firefox.


原文:https://stackoverflow.com/questions/35298016
更新时间:2023-05-17 19:05

最满意答案

尝试发布未处理的警告。

不过,我也记得我在<map>得到了一些来自<xtree> 4级警告,可以安全地忽略它(IIRC是C4702 ,这是无害的)。

为了避免这种警告,我在STL #include一些合适的#pragma warning指令(包含在正确的#ifdef以便让他们仅考虑MSVC ++,感谢@Alexandre C.提醒我):

#ifdef _MSC_VER
    //Disable the C4702 warning for the following headers
    #pragma warning(push)
    #pragma warning(disable:4702)
#endif // _MSC_VER
//map STL container
#include <map>
//list STL container
#include <list>
//vector STL container
#include <vector>
#ifdef _MSC_VER
    #pragma warning(pop)
#endif

您也可以简单地将警告等级降低到3(甚至更低),只需在该部分使用:

#ifdef _MSC_VER
    // Lower the warning level to 3 just for this section
    #pragma warning(push, 3)
#endif
//map STL container
#include <map>
//list STL container
#include <list>
//vector STL container
#include <vector>
#ifdef _MSC_VER
    #pragma warning(pop)
#endif // _MSC_VER

有关更多信息,请参阅#pragma warning文档


Try to post the non-treated warnings.

However, I too remember that I got some level 4 warning from <xtree> in <map> , that could be safely ignored (IIRC it was C4702, which is harmless).

To avoid the warning, I put around the STL #includes some appropriate #pragma warning directives (enclosed in the correct #ifdefs to have them considered only on MSVC++, thanks to @Alexandre C. for reminding me of it):

#ifdef _MSC_VER
    //Disable the C4702 warning for the following headers
    #pragma warning(push)
    #pragma warning(disable:4702)
#endif // _MSC_VER
//map STL container
#include <map>
//list STL container
#include <list>
//vector STL container
#include <vector>
#ifdef _MSC_VER
    #pragma warning(pop)
#endif

You could also simply lower the warning level to 3 (or even lower) just in that section with:

#ifdef _MSC_VER
    // Lower the warning level to 3 just for this section
    #pragma warning(push, 3)
#endif
//map STL container
#include <map>
//list STL container
#include <list>
//vector STL container
#include <vector>
#ifdef _MSC_VER
    #pragma warning(pop)
#endif // _MSC_VER

For more info, see the documentation of #pragma warning.

相关问答

更多
  • 简短的回答:永远。 长答案:永远。 这就是他们在那里。 它们针对STL容器进行了优化,它们比你自己写的任何东西都更快,更清晰,更习惯。 你应该考虑推出自己的唯一情况是如果你能阐明STL算法不能满足的非常具体的任务关键需求。 编辑补充说:(好吧,真的不是真的总是,但如果你必须问你是否应该使用STL,答案是“是”)。 Short answer: Always. Long answer: Always. That's what they are there for. They're optimized for u ...
  • 我想我终于得到了编译器暗示的东西。 循环不是在一个整数上执行的,所以我认为编译器试图告诉的是它实际上不能计算循环将执行多少次运行。 您使用的警告实际上通常应与-funsafe-loop-optimizations ,从gcc优化选项页面 : -funsafe-loop-optimizations如果给出,循环优化器将假定循环索引不会溢出,并且具有非平凡退出条件的循环不是无限的。 即使循环优化器本身无法证明这些假设是有效的,也可以实现更广泛的循环优化。 使用-Wunsafe-loop-optimization ...
  • 尝试发布未处理的警告。 不过,我也记得我在得到了一些来自 4级警告,可以安全地忽略它(IIRC是C4702 ,这是无害的)。 为了避免这种警告,我在STL #include一些合适的#pragma warning指令(包含在正确的#ifdef以便让他们仅考虑MSVC ++,感谢@Alexandre C.提醒我): #ifdef _MSC_VER //Disable the C4702 warning for the following headers #pragma ...
  • 你的地图名称是poweruplist而不是powerups (你在for循环中使用这个名字)。 如果这不是错误的原因,那么看起来你是for循环是在一个函数中,它通过const引用接受映射(或者是类的const成员函数)。 在这种情况下,您的迭代器类型应该是const_iterator而不是iterator 。 Your map name is poweruplist not powerups (You are using this name in the for loop). If this is not ...
  • 您必须像函数所期望的那样使用默认分配器。 你有两种不同的类型,没有办法解决这个问题。 只需在操作向量之前调用reserve ,即可获得内存分配。 想想可能发生的坏事。 该函数可以使用向量并开始添加更多元素。 很快,你可以溢出你分配的堆栈空间; 哎呀! 如果您真的关心性能,那么更好的方法是用自定义内存管理器替换operator new和kin。 我已经这样做了,分配可以大大改善。 对我来说,分配大小为512或更小的大小约为4次操作(移动几个指针); 我使用了池分配器) You have to use the ...
  • 这里的问题是比较运算符将iterator与iterator和const_iterator与const_iterator进行比较。 如果运算符是非成员函数,编译器将找到从iterator到const_iterator的转换并调用const_iterator比较函数。 如果比较运算符是成员函数,它将在lhs上调用,在示例中,它是iterator并且无法将const_iterator转换为iterator 。 解决方法的作用是将const_iterator为lhs,并且因为iterator可以转换为const_i ...
  • 任何包含在你的MFC项目中的STL应该包含在DEBUG_NEW的定义之前。 这在过去是一个问题(现在不再是这样了,因为我不能在VS 2010中重现它)。 // myfile.cpp #ifdef _DEBUG #define new DEBUG_NEW #endif // This will cause the error #include 而 // myfile.cpp // will work OK #include #ifdef _DEBUG #define ...
  • 问题不在STL中。 使用线程安全函数__gnu_cxx::__exchange_and_add和__gnu_cxx::__atomic_add引用计数std::string的GNU实现。 问题是__exchange_and_add / __atomic_add被破坏了。 解决方案是通过良好实现这些功能来重建STL。 幸运的是,Alchemy发行版为我们留下了一些面包屑。 请参阅$ALCHEMY_HOME/avm2-libc/README ,它告诉我们如何执行此操作: The sources used to ...
  • 不,因为这些是不同的语言。 仅仅因为在名称中的常见字母之后只有文本字符串“++”并不意味着什么 - 这与尝试在Python中使用Java容器相当。 如果你想使用STL,你必须使用C ++编译器。 No, because these are different languages. Just because one only has the text string "++" after a common letter in the name doesn't mean anything - this is th ...
  • 由于您已经在使用此站点的STL导入器,因此您可以在同一Web中找到一个3D模型浏览器,您可以使用它来预览模型,然后再将其导入JavaFX应用程序。 如果无法使用此浏览器导入它们,则问题可能与文件中的无效STL格式有关。 如果它们已导入,则问题可能出在您的应用程序中。 将调用嵌入try-catch并发布您可能想要的异常。 StlMeshImporter stlImporter = new StlMeshImporter(); try { stlImporter.read(this.getClass ...

相关文章

更多

最新问答

更多
  • 您如何使用git diff文件,并将其应用于同一存储库的副本的本地分支?(How do you take a git diff file, and apply it to a local branch that is a copy of the same repository?)
  • 将长浮点值剪切为2个小数点并复制到字符数组(Cut Long Float Value to 2 decimal points and copy to Character Array)
  • OctoberCMS侧边栏不呈现(OctoberCMS Sidebar not rendering)
  • 页面加载后对象是否有资格进行垃圾回收?(Are objects eligible for garbage collection after the page loads?)
  • codeigniter中的语言不能按预期工作(language in codeigniter doesn' t work as expected)
  • 在计算机拍照在哪里进入
  • 使用cin.get()从c ++中的输入流中丢弃不需要的字符(Using cin.get() to discard unwanted characters from the input stream in c++)
  • No for循环将在for循环中运行。(No for loop will run inside for loop. Testing for primes)
  • 单页应用程序:页面重新加载(Single Page Application: page reload)
  • 在循环中选择具有相似模式的列名称(Selecting Column Name With Similar Pattern in a Loop)
  • System.StackOverflow错误(System.StackOverflow error)
  • KnockoutJS未在嵌套模板上应用beforeRemove和afterAdd(KnockoutJS not applying beforeRemove and afterAdd on nested templates)
  • 散列包括方法和/或嵌套属性(Hash include methods and/or nested attributes)
  • android - 如何避免使用Samsung RFS文件系统延迟/冻结?(android - how to avoid lag/freezes with Samsung RFS filesystem?)
  • TensorFlow:基于索引列表创建新张量(TensorFlow: Create a new tensor based on list of indices)
  • 企业安全培训的各项内容
  • 错误:RPC失败;(error: RPC failed; curl transfer closed with outstanding read data remaining)
  • C#类名中允许哪些字符?(What characters are allowed in C# class name?)
  • NumPy:将int64值存储在np.array中并使用dtype float64并将其转换回整数是否安全?(NumPy: Is it safe to store an int64 value in an np.array with dtype float64 and later convert it back to integer?)
  • 注销后如何隐藏导航portlet?(How to hide navigation portlet after logout?)
  • 将多个行和可变行移动到列(moving multiple and variable rows to columns)
  • 提交表单时忽略基础href,而不使用Javascript(ignore base href when submitting form, without using Javascript)
  • 对setOnInfoWindowClickListener的意图(Intent on setOnInfoWindowClickListener)
  • Angular $资源不会改变方法(Angular $resource doesn't change method)
  • 在Angular 5中不是一个函数(is not a function in Angular 5)
  • 如何配置Composite C1以将.m和桌面作为同一站点提供服务(How to configure Composite C1 to serve .m and desktop as the same site)
  • 不适用:悬停在悬停时:在元素之前[复制](Don't apply :hover when hovering on :before element [duplicate])
  • 常见的python rpc和cli接口(Common python rpc and cli interface)
  • Mysql DB单个字段匹配多个其他字段(Mysql DB single field matching to multiple other fields)
  • 产品页面上的Magento Up出售对齐问题(Magento Up sell alignment issue on the products page)