使用Java脚本更改SVG的颜色

Question

我想弄清楚当我单击“中”和“右”容器时，.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>

Answer 1

据我所知，您需要使SVG内联，以便能够进行这种样式设置。 SVG内联后，您可以使用“填充”样式来更改颜色。

在这里回答了一个重复问题：

img src SVG更改填充颜色

Answer 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文件直接从<svg>标记开始到HTML。然后直接在代码中修改背景，或在svg内设置适当的标记样式。