javascript - 加载内联 SVG 时出现填充（url#）问题

Question

我不知道是否有人已经问过这样的问题，但我一直在搜索，但没有找到任何关于这个问题的信息。

一些 div 首先显示，而其他 div 在使用 JS 转换后出现。在其中一个 div 中，我有一个内联 SVG。当第一个 div 加载（具有内联 SVG 的那个）时，它看起来没问题，如下图所示：

但是，当具有内联 SVG 的 div 仅在某些转换后出现时，它会以这种方式出现：

遭受转换的 div 是保存整个块的那些（除了带有 svg 内联的父 div 块）。似乎发生的情况是url(#idofgradient)找不到或无法识别调用的 svg 的填充。并且仅#F7F7F7调用的填充效果很好（图像中间的 SVG 线条部分）。

我不知道在这种情况下发生了什么。

如果有人可以帮助我，我将不胜感激。

score 0 · Accepted Answer

很高兴看到一些代码，但我认为您遇到的问题与内联填充有关。删除内联填充并使用 css 应用填充（如果您正在制作填充过渡）。

.class{
fill:#aaa; 
}
.class:hover{
fill:#fff; 
}

1 回答 1