<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="12 -10 80 55" width="200" height="49">
<style>#svg-group { fill: #7F7F7F; } #Layer_1:hover #svg-group { fill: #FFF; transition: fill 0.5s ease; } #Layer_1:hover #svg-group text { fill: #FFF; transition: fill 0.2s ease; }</style>
<rect x="-9" y="-8" width="44" height="44" rx="10" fill="#404040"/>
<g id="svg-group" transform="scale(1.1)">
<path d="M12,14a3,3,0,0,0-3,3v7.026h6V17A3,3,0,0,0,12,14Z"/>
<path d="M13.338,.833a2,2,0,0,0-2.676,0L0,10.429v10.4a3.2,3.2,0,0,0,3.2,3.2H7V17a5,5,0,0,1,10,0v7.026h3.8a3.2,3.2,0,0,0,3.2-3.2v-10.4Z"/>
<text x="35" y="23" font-size="22" fill="#7F7F7F" font-family="Arial, sans-serif" font-weight="bold" dy="5;">Home</text>
</g>
</svg>
Hello all,
I am new to Power BI and I am creating a dashboard where i have a navigation pane on the left side of the screen. I have an SVG file where is an icon, a rounded square behind it and the word "Home" that turns color with transitioning speed when hovered over. I would like to make more of these for different pages in the dashboard to facilitate page navigation and make it more intuitive for end-users.
My current issue is that I cannot make an SVG file (put in using the HTML Content custom visual) navigate to a page without having a button that would either be infront of it and cover it and remove the color transitioning when hovered over, or be behind it and not be clickable.
Is there any way to go around this at all? I could not find any resources about making an SVG clickable to a different page. I realize I can make it navigate to a different web page but that doesn't sound appealing to me.
