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

【问题标题】：Trouble with fill(url#) on loading inline SVG加载内联 SVG 时出现填充（url#）问题
【发布时间】：2013-11-26 19:43:21
【问题描述】：

我不知道是否有人已经询问过类似的问题，但我一直在搜索，但没有找到有关此问题的任何信息。

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

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

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

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

如果有人可以帮助我，谢谢。

【问题讨论】：

【解决方案1】：

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

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

【讨论】：