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内联后，您可以使用＆＃34; fill＆＃34;风格改变颜色。

这里已经回答了一个问题：

img src SVG changing the fill color

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文件的内容直接发送到HTML，从<svg>标签开始......然后直接在代码中修改背景，或者在svg中设置相应的标签样式。

使用Javascript更改SVG的颜色

2 个答案: