title: How i can style SVG <use> elements on hover?
body: <p>I'm beginner in SVG. I'm trying to change style of multiple <code>&lt;use&gt;</code> elements on hover at a specific <code>&lt;use&gt;</code> element with css, but I can't, because <code>&lt;use&gt;</code> elements using <code>Shadow DOM</code>.</p>
  <p>I have the following <code>&lt;defs&gt;</code>:</p>
  <pre class="lang-xml prettyprint-override"><code>&lt;defs&gt;
      &lt;filter id=&quot;Sjax0b81q1&quot; filterUnits=&quot;userSpaceOnUse&quot;&gt;...&lt;/filter&gt;
      &lt;circle cx=&quot;0&quot; cy=&quot;0&quot; r=&quot;40&quot; id=&quot;action-circle&quot; style=&quot;cursor: move; fill: #fff;&quot; filter=&quot;url('#Sjax0b81q1')&quot; class=&quot;el action-el&quot;&gt;&lt;/circle&gt;
      &lt;g id=&quot;condition-rhombus&quot; style=&quot;cursor: move; fill: #fff;&quot; class=&quot;el condition-el&quot; transform=&quot;matrix(1,0,0,1,0,0)&quot;&gt;
          &lt;circle cx=&quot;0&quot; cy=&quot;0&quot; r=&quot;40&quot; fill=&quot;none&quot;&gt;&lt;/circle&gt;
          &lt;path d=&quot;M -35 0, L 0 -35, L 35 0, L 0 35 L -35 0&quot; style=&quot;stroke-linecap: round; stroke: white;&quot; filter=&quot;url('#Sjax0b81q1')&quot; class=&quot;condition-rhombus&quot;&gt;&lt;/path&gt;
      &lt;/g&gt;
      &lt;g id=&quot;svg-plus-button&quot;&gt;
          &lt;circle cx=&quot;0&quot; cy=&quot;40&quot; r=&quot;10&quot; id=&quot;svg-plus-circle&quot; fill=&quot;none&quot; style=&quot;fill-opacity: 1;&quot; class=&quot;svg-plus-circle&quot;&gt;&lt;/circle&gt;
          &lt;path d=&quot;M956.8,408.....408.5z&quot; id=&quot;svg-plus-sign&quot; fill=&quot;none&quot; transform=&quot;matrix(0.008,0,0,0.008,-4,36)&quot; style=&quot;pointer-events: none;&quot; class=&quot;svg-plus-sign&quot;&gt;&lt;/path&gt;
      &lt;/g&gt;
      &lt;rect x=&quot;-20&quot; y=&quot;-20&quot; width=&quot;40&quot; height=&quot;40&quot; id=&quot;rect-active-layer&quot; fill=&quot;none&quot; style=&quot;pointer-events: visible;&quot; class=&quot;rect-active-layer&quot;&gt;&lt;/rect&gt;
      &lt;path d=&quot;M252.967.....2v1Z&quot; id=&quot;api-svg&quot; class=&quot;cls-1&quot;&gt;&lt;/path&gt;
  &lt;/defs&gt;
  </code></pre>
  <p>And I have a group of elements that contains several <code>&lt;use&gt;</code> elements:</p>
  <pre class="lang-xml prettyprint-override"><code>&lt;g id=&quot;action-group-2&quot; class=&quot;external action-group&quot; transform=&quot;matrix(1,0,0,1,420,180)&quot;&gt;
      &lt;g class=&quot;internal action-group&quot;&gt;
          &lt;rect x=&quot;-40&quot; y=&quot;-40&quot; width=&quot;80&quot; height=&quot;80&quot; fill=&quot;none&quot;&gt;&lt;/rect&gt;
      &lt;/g&gt;
      &lt;use xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; xlink:href=&quot;#action-circle&quot;&gt;&lt;/use&gt;
      &lt;use xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; xlink:href=&quot;#svg-plus-button&quot; id=&quot;useSjax0b81q1k&quot;&gt;&lt;/use&gt;
      &lt;use xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; xlink:href=&quot;#rect-active-layer&quot;&gt;&lt;/use&gt;
      &lt;use xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; xlink:href=&quot;#api-svg&quot;&gt;&lt;/use&gt;
  &lt;/g&gt;
  </code></pre>
  <p>For example, I need to change the <code>&lt;path&gt;</code> fill in element with id <code>#api-svg</code>, when I hover on the <code>#action-circle</code>.</p>
  <p>How can I do this? Maybe there is another way to render and styling reusable elements on hover.</p>