gpt4 book ai didi

css - Firefox 无法正确渲染 svg

转载 作者:行者123 更新时间:2023-11-28 08:58:23 25 4
gpt4 key购买 nike

我在 Firefox 中遇到了这个问题,或者我使用的东西不对,但我使用这样的 svg 图像:

<img src="image.svg" alt="some image">

浏览器像这样渲染它们:

enter image description here

我可以让他们喜欢 .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

试图移动 fill来自 <mask> 的属性到它的子元素 <use>就像在 this 中一样问题,并没有解决问题。我使用的是 Firefox 55.0.3。

最佳答案

不知道为什么FF这个文件有问题。您可能想将此作为错误报告给他们。

幸运的是,有一个简单的修复方法。去掉 Illustrator 添加的那些有些不必要的蒙版。

<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">
<path 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"/>
</svg>

关于css - Firefox 无法正确渲染 svg,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46317591/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com