加载内联 SVG 时填充(url#）出现问题

Trouble with fill(url#) on loading inline SVG

本文关键字：url# 问题 填充 SVG 加载      更新时间：2023-09-26

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

一些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 是持有整个块的块（除了带有 svg 内联的父div 块）。似乎发生的事情是，url(#idofgradient)调用的 svg 的填充没有找到，也没有被识别。只有#F7F7F7称为的填充工作正常（图像中间 SVG 的线条部分）。

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

如果有人能帮助我，我会感谢你。

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

.class{
fill:#aaa; 
}
.class:hover{
fill:#fff; 
}
相关文章：