使用<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

通过CSS background-image image属性的<img>标记的图像不能是交互式的，并且有其他限制以保持用户的隐私和安全。

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

如果您想要转换功能，则需要使用<object>或<iframe>标记，或将SVG内嵌嵌入html文档中。