使用 Javascript 更改 SVG 的颜色答案

【问题标题】：Changing the colour of an SVG using Javascript使用 Javascript 更改 SVG 的颜色
【发布时间】：2015-01-26 04:51:59
【问题描述】：

我试图弄清楚当我单击“中心”和“右”容器时，我的 .SVG 的颜色会变为红色（从白色）。

我当前的html是：

<nav>
        <span class="nav-btn"> <img src="nav-icon.svg" style="width: 60px;height: 60px;"></span>
        <ul class="nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">Prices</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>

<div class="container" id= "left" >
        <h1 style="color:white"><a>HAIR</a></h1>
    </div>

    <div class= "container" id= "center">
        <h1 style="color:white"><a>BEAUTY<a/></h1>
    </div>

    <div class="container" id= "right">
        <h1 style="color:white"><a>BARBERS</a></h1>
    </div>
</div>

【问题讨论】：

标签： javascript jquery html css svg

【解决方案1】：

据我所知，您需要使 SVG 内联才能像这样设置样式。内联 SVG 后，您可以使用“填充”样式更改颜色。

这里回答了一个欺骗问题：

img src SVG changing the fill color

【讨论】：

我不确定我是否理解？

【解决方案2】：

如果 SVG 图像是透明的，只需将其背景颜色设置为红色即可。首先你需要给你的 img 标签添加一个 ID 属性：

<img src="nav-icon.svg" id=mysvg ...>

然后您将 onClick 事件添加到您的中心和右侧容器中，如下所示：

 <div class= "container" id= "center" onClick="$('#mysvg').css('background-color','red')">

但是，如果您的 svg 不透明，则需要以不同的方式加载 SVG - 不要将其放在单独的文件 nav-icon.svg 中，而是将其作为一组标签包含在 HTML 本身中，只需粘贴将svg文件的内容直接转成HTML，以<svg>标签开头……然后要么直接在代码中修改背景，要么在svg中设置合适的标签样式。

【讨论】：