html - 在 HTML5 中使用 SVG 文件并更改颜色

Question

我想在我的网站中使用 svg 文件作为图像。我正在使用这个：

<object id="mysvg" type="image/svg+xml" data="logo.svg">Your browser does not support SVG</object>

它在页面中显示图像。但现在我想修改图像。这是一张单色（黑色）图像。我想让它变白。就像填充白色一样。最好的方法是什么？我也可以在图像悬停时达到相同的结果吗？谢谢

Answer 1

您可以使用以下内容从 html 容器中修改图像：

var svgdoc = document.getElementById("mysvg").contentDocument;
var svgElement = svgdoc.getElementById("whatever the Id is of the black image");
svgElement.setAttribute("fill", "white");

对于悬停，您需要将逻辑放入 logo.svg 文件本身，即创建一个<style>元素并制作悬停伪类规则以更改悬停时的颜色。