当使用<img>标签嵌入时，SVG填充转换不起作用

Question

我在我的svg中定义了CSS转换规则。它是这样的：

#mark #bg { 
    transition: fill 200ms; 
    fill: #245575; 
    } 

#mark:hover #bg { 
    fill: #ff5c26; 
    } 

当我把它拖入浏览器的空白页并测试它时，转换工作正常。但如果我使用<img src="images/mark.svg" alt="">将svg嵌入到我的网站中，则转换不起作用。

我错过了什么吗？

Answer 1

通过<img>的图片通过CSS背景图片图片属性的标签不能互动并且有其他限制以保持用户的隐私和安全。

如果你问自己“如果图像是.png或.gif，我可以这样做吗？”那么你会走在正确的路上。浏览器故意选择保持与SVG文件相同的心理模型，以便图像的功能易于理解。

如果您希望转换起作用，您需要使用<object>或标记，或将SVG嵌入到html文档中。