在两个svg图标之间切换
在两个svg图标之间切换
提问于 2021-09-23 11:43:16
我如何在这里放置另一个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>回答 1
Stack Overflow用户
发布于 2021-09-23 14:05:01
您可以添加javascript来更改属性。
<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69299353
复制相关文章
相似问题
腾讯云开发者
