[Vuejs]-Vue.js | Change Fill of a SVG via routerlink

by

0👍

If I understand the problem correctly, you want the logo to have a blue fill color when its router link is active, and green otherwise.

Since .router-link-exact-active is added to the <router-link>‘s anchor tag when the link is clicked, you could use that as a selector to target the SVG’s .wortmarke element with a fill color set to blue; and add a style to default the fill color set to green:

<style scoped>
.router-link-exact-active .wortmarke {
  fill: blue; /* fill color when active */
}
.wortmarke {
  fill: green; /* default fill color */
  size: 3vw;
  transition: 250ms;
  width: 100%;
  height: 100%;
}
</style>

demo

Leave a comment