CODEWITHSUNDEEP
javascriptcsssvgsnap.svgxlink
Ihor Yanovchyk
Ihor Yanovchyk

Reputation: 786

How i can style SVG <use> elements on hover?

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.

Upvotes: 4

Views: 2102

Answers (2)

Ian
Ian

Reputation: 13842

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.

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324640

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>

Upvotes: 6

Related Questions