我可以使用基于<use xlink>的SVG sprite来修复跨浏览器的CSS问题而无需使用完整的内联代码吗？

Question

摘要:一些SVG目标CSS效果在<use xlink>SVG精灵的Chrome和IE(Firefox很好)中不起作用,但是当相同的SVG代码真正内联时,相同的CSS工作得非常好.

JSFIDDLE: http ://jsfiddle.net/x8vg8k4p/5/

---

我目前正在使用<svg><use xlink:href="#symbol-id" /></svg>块来动态调用从PHP导入的SVG精灵(作为外部文件)调用SVG代码.

一些CSS效果应用于SVG,无论是标准还是悬停.所有这些效果在Firefox上都可以正常工作,但在IE和Chrome上,它们不会:

• 该fill属性circle不生效
• opacitySVG的两个内部部件上的设置(默认情况下为十字形,悬停时为拇指)不会生效

我相信CSS没有任何问题,因为如果SVG代码是内联的并且不是通过精灵id引用导入的,相同的代码工作得非常好,小提琴非常清楚地表明了这一点.

我已经挣扎了好几个小时,移动了一些代码,添加和删除了额外的属性,但却无法解决这个问题.

以下是完整代码的相关摘录,可以在JSfiddle链接上看到 - 这似乎不利于在问题中包含所有代码的可读性,但如果有人告诉我这是一个糟糕的形式,我很乐意编辑这个问题.

不工作:

<a><svg><use xlink:href="#thumbs-up" /></svg></a>

工作:

<a><svg><!-- truly inline SVG code here --></svg></a>

CSS的这些部分是在Chrome和IE上失败的部分:

a svg circle            {fill: #4291c2;}
a svg path#cross        {opacity: 0;}
a:hover svg circle      {fill: #91c142;}
a:hover svg path#cross  {opacity: 1;}
a:hover svg g#hand      {opacity: 0;}

最后是SVG代码本身:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <symbol id="thumbs-up" viewBox="0 0 100 100">
        <circle cx="50" cy="50" r="50"/>
        <g id="hand">
            <polygon fill="#FFFFFF" points="64.287,37.926 64.287,71.491 80.925,71.491 73.044,37.926     "/>
            <path fill="#FFFFFF" d="M54.425,41.857c0-2.634-2.811-4.295-5.025-5.155c-2.728-1.059-4.069-4.203-1.565-8.379
                c2.146-3.58-2.084-8.795-6.628-6.058c-5.205,3.134-4.073,11.161-2.468,15.889c0.61,1.798-0.435,1.743-1.756,1.743
                c-1.081,0-5.646,0-5.646,0h-8.469c-0.998,0-3.288,6.399-2.289,6.399h10.729c-0.188,0.5-0.406,1.391-0.619,2.544H19.768
                c-1.152,0-1.919,7.2-0.714,7.2h10.859c-0.035,0.842-0.049,1.695-0.038,2.544H19.372c-1.195,0-0.277,6.256,0.803,6.256h10.413
                c0.245,0.95,0.561,1.813,0.962,2.544H21.331c-1.294,0,1.405,5.811,3.027,5.811h6.978c4.925,0,13.934,0,17.805,0
                c3.872,0,5.378-5.477,11.86-5.477V43.891C61.001,43.891,54.425,44.12,54.425,41.857z"/>
        </g>
        <path id="cross" fill="#FFFFFF" d="M50.042,54.392L39.967,66.389c-0.659,0.854-1.478,1.281-2.454,1.281
            c-0.879,0-1.612-0.306-2.198-0.915c-0.586-0.61-0.879-1.355-0.879-2.234c0-0.781,0.195-1.404,0.586-1.867l11.065-13.199
            L35.864,37.311c-0.464-0.536-0.696-1.147-0.696-1.831c0-0.806,0.286-1.531,0.859-2.179c0.572-0.646,1.31-0.971,2.211-0.971
            c1.023,0,1.852,0.382,2.485,1.145l9.285,11.188l9.547-11.273c0.586-0.706,1.318-1.06,2.198-1.06c0.781,0,1.49,0.275,2.125,0.824
            c0.635,0.55,0.953,1.251,0.953,2.105c0,0.83-0.135,1.404-0.403,1.722L54.021,49.495l10.921,13.158
            c0.415,0.463,0.623,1.041,0.623,1.729c0,0.937-0.312,1.718-0.935,2.345c-0.622,0.629-1.337,0.942-2.142,0.942
            c-0.952,0-1.782-0.427-2.49-1.282L50.042,54.392z"/>
    </symbol>
</svg>

Answer 1

您无法对通过 use 引用的元素进行寻址。这是对您的问题的详细回答。

另外，请参阅此答案，其中讨论了可能的解决方法。