Самый простой способ скрыть и показать SVG? - PullRequest
Новая
       15

Самый простой способ скрыть и показать SVG?

0 голосов
/ 21 марта 2019

Я использую angular 7. У меня есть 2 svgs: один черный, и я хотел бы показать цвет на другом, когда он зависает.

Это мой тестовый фрагмент: 

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>

Эффект применяется ко всем svgs вместо текущего.

Ответы [ 2 ]

1 голос
/ 21 марта 2019

Вы можете попробовать указать свой svg id (или класс), а затем оформить его так: 

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

идентификатор должен быть внутри вашего svg: 

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

Я не уверен, что это именно то, что вы имеете в виду, но это простой способ сделать это

0 голосов
/ 27 марта 2019

Я бы посоветовал взглянуть на ngx-svg , которая позволяет создавать контейнеры и добавлять несколько элементов в эти контейнеры - в вашем случае круги.У него есть и другие элементы, и есть документация, которая позволяет понять, что вы должны делать.

...