How i can style SVG elements on hover?

Question

I'm beginner in SVG. I'm trying to change style of multiple <use> elements on hover at a specific <use> element with css, but I can't, because <use> elements using Shadow DOM.

I have the following <defs>:

<defs>
    <filter id="Sjax0b81q1" filterUnits="userSpaceOnUse">...</filter>
    <circle cx="0" cy="0" r="40" id="action-circle" style="cursor: move; fill: #fff;" filter="url('#Sjax0b81q1')" class="el action-el"></circle>
    <g id="condition-rhombus" style="cursor: move; fill: #fff;" class="el condition-el" transform="matrix(1,0,0,1,0,0)">
        <circle cx="0" cy="0" r="40" fill="none"></circle>
        <path d="M -35 0, L 0 -35, L 35 0, L 0 35 L -35 0" style="stroke-linecap: round; stroke: white;" filter="url('#Sjax0b81q1')" class="condition-rhombus"></path>
    </g>
    <g id="svg-plus-button">
        <circle cx="0" cy="40" r="10" id="svg-plus-circle" fill="none" style="fill-opacity: 1;" class="svg-plus-circle"></circle>
        <path d="M956.8,408.....408.5z" id="svg-plus-sign" fill="none" transform="matrix(0.008,0,0,0.008,-4,36)" style="pointer-events: none;" class="svg-plus-sign"></path>
    </g>
    <rect x="-20" y="-20" width="40" height="40" id="rect-active-layer" fill="none" style="pointer-events: visible;" class="rect-active-layer"></rect>
    <path d="M252.967.....2v1Z" id="api-svg" class="cls-1"></path>
</defs>

And I have a group of elements that contains several <use> elements:

<g id="action-group-2" class="external action-group" transform="matrix(1,0,0,1,420,180)">
    <g class="internal action-group">
        <rect x="-40" y="-40" width="80" height="80" fill="none"></rect>
    </g>
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#action-circle"></use>
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-plus-button" id="useSjax0b81q1k"></use>
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rect-active-layer"></use>
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#api-svg"></use>
</g>

For example, I need to change the <path> fill in element with id #api-svg, when I hover on the #action-circle.

How can I do this? Maybe there is another way to render and styling reusable elements on hover.

score 6 · Answer 1 · answered Dec 07 '17 at 23:47

6

Define the path to have fill="inherit", then you should be able to set fill="whatever" on the <use> element's styles and it will work.

use:hover {
  fill: red;
}

<svg>
  <defs>
    <circle id="test" fill="inherit" cy="10" r="10" />
  </defs>
  <use xlink:href="#test" transform="translate(10,0)" />
  <use xlink:href="#test" transform="translate(30,0)" />
  <use xlink:href="#test" transform="translate(50,0)" />
  <text y="40">Hover over the circles!</text>
</svg>

answered Dec 07 '17 at 23:47

Niet the Dark Absol

320,036
81
464
592

I need to set the default fill as `fill: #fff`. Because all SVG elements are parsed and renderer on Canvas to create a screenshot of my ` – Ihor Yanovchyk Dec 08 '17 at 00:16
fill inherit isn't doing anything here, just leave it out and it should work fine. – Ian Dec 08 '17 at 08:15

score 0 · Answer 2 · answered Dec 08 '17 at 08:24

There's nothing overly complex here. Just change the 'use' element, rather than anything in the defs area (unless you want it to affect everything that references it).

You can either style the use element via normal css, via a css selector, e.g it's id is possibly simplest.

Or you can set the fill svg attribute on the svg 'use' element you are handling.

You shouldn't need fill inherit or anything unless I'm missing something.

How i can style SVG elements on hover?

2 Answers2