在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>元素并制作悬停伪类规则以更改悬停时的颜色。