这是一个奇怪的问题。我这里有一些简单的HTML。
<a href="#">
<svg><use xlink:href="/images/iconSprite.svg#facebook"></use></svg>
</a>
我就是这样设计的
A{width:40px; height:40px;}
A > SVG{
width: 65%;
height: 65%;
fill: white;
}
这在Chrome浏览器中以及由于IE9的某些原因而完美运行，但是在Firefox（最新）和IE 10和11中，元素模具完全没有样式。
但是，如果我将选择器从更改A > SVG为A > *它，则在两种情况下都可以正常使用。这似乎很棘手，我宁愿理解问题出在哪里，如果可能的话，提出一个更整洁的解决方案。
我曾想过，如果不可能在选择器中使用SVG，那么在互联网上将会有很多提及，但是我什么也找不到，所以我一定做错了事。
任何帮助将非常感激。
该问题似乎是由svgCSS中的选择器大写引起的。以下面的代码段为例，其中usingSVG无效，但有效svg。
.wrap-a > SVG {
background: blue;
}
.wrap-b > svg {
background: green;
}<a class="wrap-a">
<svg width="226" height="226"><circle cx="110" cy="107" r="80" stroke="black" stroke-width="5" fill="red" /></svg>
</a>
<a class="wrap-b">
<svg width="226" height="226"><circle cx="110" cy="107" r="80" stroke="black" stroke-width="5" fill="red" /></svg>
</a>与HTML标签不同，这最可能与SVG标签区分大小写有关。*起作用的原因是因为它不区分大小写。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句