svg 在 safari 中更新后无法正确渲染

Question

我正在开发 React 项目，并实现了用于图标的渐变生成器。问题是，在 chrome 上一切正常，但 safari 通常只会在第一次渲染图标，例如，如果我执行一些更新操作，例如将视图更改为移动设备或更改组件的状态，它会变成黑色。当我在图标之间切换时，它会重新生成，直到我重复该场景。

我读到 safari 的常见问题是 url 路径没有正确解析，但正如你所看到的，我已经这样做了，即使路径是硬编码的，它也不起作用。还尝试在 safari 中禁用画布渲染。

<svg
    width={72}
    height={26}
>
    <defs>
        <linearGradient id={object.id}>
            {this.generateStops(object.depthColors ? object.depthColors : [])}
        </linearGradient>
    </defs>
    <rect width={72} height={26} fill={`url(${window.location.href}#${object.id})`}/>
</svg>

我想我不会添加更多代码，因为问题不在于止损生成，它总是返回正确生成的止损。我还尝试向 svg 添加各种参数，例如

id

、

viewbox

，但没有帮助。

Answer 1

我最终做的是这样的：

const random = Math.random().toString();

return (
    <svg
        width={72}
        height={26}
    >
        <defs>
            <linearGradient id={random}>
                {this.generateStops(colorPalette.depthColors ? colorPalette.depthColors : [])}
            </linearGradient>
        </defs>
        <rect width={72} height={26} fill={`url(#${random})`}/>
    </svg>
);

之前的版本也使用唯一的id来生成渐变，但每次选择相同的渐变时并不会刷新。

Answer 2

我相信我刚刚遇到了和你完全相同的问题！ 我有带有线性渐变的 SVG，只有当发生一些渲染/取消渲染时（在我的例子中是模态窗口），它才会在 iOS 上变黑。 Chrome/Firefox 都很好。

详细的文章可以在这里找到，代码沙箱示例可以在这里。

核心原因是webkit bug。我使用的是运行 iOS 15.4（2022 年 3 月 14 日发布）的 iPad，与提出此问题的时间相似。一旦我将 iPad 更新到最新版本（从而更新了 webkit），问题就消失了。

虽然我花了 30 多个小时调试这个问题，但我不敢相信我没有考虑尝试任何其他 iOS 设备（尤其是那些完全更新到最新版本的设备）。