title: SVG elements events
body: <p>I have a div with multiple SVG elements acting as buttons, The div and its elements are all added after the page loads and the user does some staff.
  I want to add events to the SVG elements, so using event delegation, I get the event then inspect its target.
  The problem is when I try this everything works just fine. but when I click on the element:<br>
  <br> <code>e.target</code> property sometimes returns the SVG element and other times returns a path element.<br><br>
  I came up with a workaround to this using 2 conditions in my event handler for each button ,along with check for the parent or element id, and It worked but I want to know why this is happening.
  The best thing I could come up with is that the path represents the borders of the icons but I am not sure.
  <br><br>
  If I used an <code>&lt;i&gt;</code> tag for my icons, will I have the same issue?<br><br>
  EDIT:</p>
  
  <pre><code>var secondCondition = (e.target.tagName === 'path' &amp;&amp; e.target.parentElement.id === 'icon-circle-with-minus');
  if (e.target.matches('.servingsDecrease *, .servingsDecrease') || secondCondition) {
       console.log('dec');
  }
  </code></pre>
  
  <p>this code works fine.</p>