title: How can I add a Hover Effect to an Image in an SVG Path?
body: <p>I'm designing a radial menu using SVG paths:</p>
  
  <p><a href="https://i.stack.imgur.com/Lyz8k.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Lyz8k.png" alt="Home Network Landing Page Menu"></a></p>
  
  <p>Each "sector" should have an image that changes when the mouse cursor is inside that sector.</p>
  
  <p>I have tested using <code>:hover</code> styles on pretty much everything in my <code>.css</code> file, but I can't figure out a way to make the image change together with the sector when it becomes highlighted.</p>
  
  <pre><code>&lt;symbol class="icon icon-" id="icon-1" viewBox="0 0 83 83"&gt;
  
    &lt;!-- Red light --&gt;
    &lt;image
      xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/Srouge.png/80px-Srouge.png"
      width="83" height="83"
    &gt;&lt;/image&gt;
  
    &lt;!-- Green light for hover, can't get it to work --&gt;
    &lt;!--
    &lt;image
      xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Svert.png/80px-Svert.png"
      width="83" height="83"
    &gt;&lt;/image&gt;
    --&gt;
  
  &lt;/symbol&gt;
  </code></pre>
  
  <p>Is there a way to switch to a different image when the SVG path gets highlighted without using JavaScript?</p>
  
  <p>You can view the full code of my menu attempt here:
  <a href="https://jsfiddle.net/tjdbkge5/" rel="nofollow noreferrer">https://jsfiddle.net/tjdbkge5/</a></p>
  
  <hr>
  
  <p>EDIT: Instead of replacing the image, fading it out with CSS filters would be fine, too. I just haven't managed to trigger these with the SVG path (they trigger only when the mouse is over the image itself).</p>
  
  <p>Example:</p>
  
  <pre><code>symbol {
    overflow: visible;
    filter: grayscale(80%) brightness(25%);
    opacity: 0.25;
  }
  
  symbol:hover {
    filter: none;
    opacity: 1;
  }
  </code></pre>