使用 Javascript 更改 SVG 的颜色

Changing the colour of an SVG using Javascript

本文关键字：颜色 SVG 更改 Javascript 使用      更新时间：2023-09-26

我试图弄清楚当我单击我的"中心"和"右"容器时，我的.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>

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

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

img src SVG 更改填充颜色

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

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

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

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

但是，如果您的 svg 不透明，您将需要以不同的方式加载 SVG - 不要将其放在单独的文件导航图标.svg中，而是将其作为一组标签包含在 HTML 本身中，只需将 svg 文件的内容直接粘贴到 HTML 中，从 <svg> 标签开始......然后直接在代码中修改背景，或者在 svg 中设置适当的标签样式。

相关文章：