我在Firefox浏览器中遇到了这个问题,或者我使用方法不正确,但是我使用的是像这样的svg图像:
<img src="image.svg" alt="some image">
浏览器将它们呈现为以下内容:
我可以用 .png
的格式,这样可以正常工作,但我需要使用 .svg
格式。
使用SVG源更新
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<defs>
<path id="a" d="M13.333 9.333V7.746c0-.717.159-1.08 1.271-1.08H16V4h-2.33c-2.853 0-3.795 1.308-3.795 3.554v1.78H8V12h1.875v8h3.458v-8h2.35L16 9.333h-2.667z"/>
<path id="c" d="M0 0h24v24H0z"/>
</defs>
<g fill="none" fill-rule="evenodd">
<mask id="b" fill="#fff">
<use xlink:href="#a"/>
</mask>
<use fill="#000" xlink:href="#a"/>
<g mask="url(#b)">
<use fill="#232323" xlink:href="#c"/>
</g>
</g>
</svg>
更新2
尝试将<mask>
标签中的fill
属性移至其子元素<use>
中,就像这个问题中所示,但并没有解决该问题。我正在使用Firefox 55.0.3。
img[src="*.svg"]
和<svg>
之间有什么区别吗? - FelipeAls