实施例

Question

这是一个奇怪的问题。我在这里有一些简单的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是不可能的，那么在互联网上会有很多提及，但是我找不到任何东西，所以我一定做错了。

非常感谢任何帮助。

Answer 1

此问题似乎是由CSS中的svg选择器大写引起的。以下面的代码段为例，其中使用SVG不起作用，但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标记有关。 *起作用的原因是因为它不区分大小写。

样式不适用于firefox和IE中的SVG元素

1 个答案:

实施例