时间戳

首页 > 解决方案 > 在两个 svg 图标之间切换

html - 在两个 svg 图标之间切换

问题描述

如何svg xmlnx在此处放置另一个链接，以便在单击第一个 svg 时，它会切换到另一个 svg 链接？

我的html：

<div class="input-box" *ngIf="loginForm.controls.password.untouched || loginForm.controls.password.valid">
    <input placeholder="***********" name="password" id="password" [type]="show ? 'text' : 'password'" formControlName="password" autocomplete="on">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" (click)="password()">
        <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
        <path fill-rule="evenodd"d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z"clip-rule="evenodd" />
    </svg>
</div>

标签： htmlsvg

解决方案

You can add javascript to change the attribute.

        <input placeholder="***********" name="password" id="password" [type]="show ? 'text' : 'password'" formControlName="password" autocomplete="on">
        <svg xmlns="http://www.w3.org/2000/svg" onclick="changesvg()" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" (click)="password()" id="Svg">
            <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
            <path fill-rule="evenodd"d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z"clip-rule="evenodd" />
        </svg>
    </div>
    <script>
        var Source = true
        var Svg=document.getElementById("Svg")
        function changesvg(){
            Source= !Source
            console.log(Source)
            if (Source==true){
                Svg.setAttribute("xmlns","http://www.w3.org/2000/svg")
            }
            else{
                Svg.setAttribute("xmlns","New link")
            }
        }
    </script>

推荐阅读