javascript - 加载内联 SVG 时出现 fill(url#) 问题

Question

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

有的div先显示，有的div在用JS转场后出现。在其中一个 div 中，我有一个内联 SVG。当第一个 div 加载时(具有内联 SVG 的那个)，它看起来正常，如下图所示:

https://drive.google.com/file/d/0B-1un9u8DWH-UExQeXpQOXJBMzA/edit?usp=sharing

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

https://drive.google.com/file/d/0B-1un9u8DWH-U0RHMnRoV3Y4OE0/edit?usp=sharing

遭受转换的 div 是包含整个 block 的 div(除了带有 svg 内联的父 div block )。似乎发生的是 url(#idofgradient) 调用的 svg 的填充未找到，也未被识别。并且只有 #F7F7F7 调用的填充工作正常(图像中间的 SVG 线条部分)。

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

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

Answer 1

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

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