Question

我有一个简单的svg

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="100px" height="100px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">

<style type="text/css">
<![CDATA[
.st0{fill:#A0A0A0;}
]]>
</style>

<path class="st0" d="M92.6,0H7.4C3.3,0,0,3.2,0,7.2v85.6c0,4,3.3,7.2,7.4,7.2h85.2c4.1,0,7.4-3.2,7.4-7.2V7.2C100,3.2,96.7,0,92.6,0
z M29.7,85.2H14.8V37.5h14.8V85.2z M22.2,31c-4.8,0-8.6-3.9-8.6-8.6c0-4.7,3.8-8.6,8.6-8.6c4.7,0,8.6,3.9,8.6,8.6
C30.8,27.1,27,31,22.2,31z M85.2,85.2H70.4V62c0-5.5-0.1-12.7-7.7-12.7c-7.7,0-8.9,6-8.9,12.3v23.6H39V37.5h14.2V44h0.2
c2-3.8,6.8-7.7,14-7.7c15,0,17.8,9.9,17.8,22.7V85.2z"/>
</svg>

然而，当我将它放在我的html文件中时：

<img src="images/icon_linkedin.svg" alt="LinkedIn">

它没有出现。检查HTML显示无法加载图像，并且HTML img元素中添加了以下内联样式。

style="display: none !important;"

更改文件名（实际文件和HTML中的文件名）修复了这个问题，但我想知道这里发生了什么？它似乎只出现在Firefox（57.0.1）中。

Answer 1

你使用的是adblocking软件吗？它应该工作jsfiddle.net/honsa/5tao1sog

内联CSS样式应用于具有特定文件名的SVG

1 个答案: