使用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內設置適當的標記樣式。