CODEWITHSUNDEEP
javascriptsvglessangular7
geek pédagogique lcms
geek pédagogique lcms

Reputation: 101

Easiest way to hide and show svg?

I am using angular 7. I have 2 svgs: one is black and i would like to show the color on the other when it is being hovered.

This is my test snippet:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent {
  title = 'menu-svg';
  svgCouleur="none";
  svgNb="block";
  //affiche le svg couleur et cache le noir et blanc
  cacheSvg(e){
    this.svgCouleur = "block";
    this.svgNb = "none";
  }
  //affiche le svg noir et blanc et on cache la couleur
  revientSvg(e){
    this.svgCouleur ="none";
    this.svgNb = "block";
  }
}
/*no at the moment*/
<svg (mouseover)="cacheSvg($event)" [style.display]="svgNb" width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="4" fill="gray" />
  Sorry, your browser does not support inline SVG.
</svg> 
<svg (mouseleave)="revientSvg($event)" [style.display]="svgCouleur" width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  Sorry, your browser does not support inline SVG.
</svg> 


<svg (mouseover)="cacheSvg($event)" [style.display]="svgNb" width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="4" fill="gray" />
  Sorry, your browser does not support inline SVG.
</svg> 
<svg (mouseleave)="revientSvg($event)" [style.display]="svgCouleur" width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="red" stroke-width="4" fill="yellow" />
  Sorry, your browser does not support inline SVG.
</svg>

The effect is applied on all svgs, instead of the current one.

Upvotes: 0

Views: 149

Answers (2)

Patiss
Patiss

Reputation: 187

I would suggest taking a look at ngx-svg which allows to create containers and add multiple elements within those containers - in your case circles. It has other elements as well, and there is a documentation, which allows to understand what you have to do as well.

Upvotes: 0

Yilmaz
Yilmaz

Reputation: 135

You could try giving your svg an id (or class) and then styling it like so:

#test{
  opacity:0;
}
#test:hover{
  opacity:1;
}

the id should be inside your svg:

<svg id="test" .............. >
</svg>

Im not sure if this is what you exactly mean but its an easy way to do it

Upvotes: 1

Related Questions