Exemple de code de la propriété CSS pointer-events.

<style>
.auto svg{
  pointer-events : auto
}
.htmlelement-none > *,
.none svg{
  pointer-events : none
}
.all svg{
  pointer-events : all
}
.stroke svg{
  pointer-events : stroke
}
.fill svg{
  pointer-events : fill
}
.painted svg{
  pointer-events : painted
}
.visible svg{
  pointer-events : visible
}
.visibleStroke svg{
  pointer-events : visibleStroke
}
.visibleFill svg{
  pointer-events : visibleFill
}
.visiblePainted svg{
  pointer-events : visiblePainted
}
.svghidden svg{
  visibility:hidden; 
  vertical-align:top
}
.htmlelement > :hover {outline:1px solid green; }
.htmlelement > :focus,
.htmlelement > :active {outline:1px solid red; }

.exemple { vertical-align:top; margin-bottom:15px } 
.exemple svg{width:100px; vertical-align:top } 
.exemple > span{ display:block; font-weight :bold; margin-bottom:3px }
.svghidden{ border:1px dotted green; display:inline-block; vertical-align:top }
</style>
<div class="exemple htmlelement">
  <span>Elément cliquable par défaut : </span>
  <a href="https://www.google.fr" target="_blank">Lien</a>
  <button type="button" onclick="alert('Click')">Bouton</button>
  <input type="radio"  name="radio"><input type="radio"  name="radio">
  <q onclick="alert('Click')">citation</q>
</div>
<div class="exemple htmlelement htmlelement-none">
  <span>pointer-events : none : </span>
  <a href="https://www.google.fr" target="_blank">Lien</a>
  <button type="button" onclick="alert('Click')">Bouton</button>
  <input type="radio" name="radio"><input type="radio"  name="radio">
  <q onclick="alert('Click')">citation</q>
</div>
<div class="exemple">
  <span>svg par defaut : </span> 
   <div class="svghidden">
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
      <a xlink:href="https://www.google.fr" target="_blank">
        <rect x="10" y="10" width="88" height="88" stroke="green" fill="mediumaquamarine" stroke-width="6"/> 
        <text x="50" y="55" text-anchor="middle" stroke="black">SVG</text>
      </a>
    </svg>
  </div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
      <a xlink:href="https://www.google.fr" target="_blank">
        <rect x="10" y="10" width="88" height="88" stroke="green" fill="mediumaquamarine" stroke-width="6"/> 
        <text x="56" y="56" text-anchor="middle" stroke="black">SVG</text>
      </a>
    </svg>
</div>
<div class="exemple auto">
  <span>pointer-events : auto : </span>
  <div class="svghidden">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
      <a xlink:href="https://www.google.fr" target="_blank">
        <rect x="10" y="10" width="88" height="88" stroke="green" fill="mediumaquamarine" stroke-width="6"/> 
        <text x="50" y="55" text-anchor="middle" stroke="black">SVG</text>
      </a>
    </svg>
  </div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <a xlink:href="https://www.google.fr" target="_blank">
      <rect x="10" y="10" width="88" height="88" stroke="green" fill="mediumaquamarine" stroke-width="6"/> 
      <text x="50" y="55" text-anchor="middle" stroke="black">SVG</text>
    </a>
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <a xlink:href="https://www.google.fr" target="_blank">
      <rect x="10" y="10" width="88" height="88" stroke="green" fill="none" stroke-width="6"/> 
      <text x="50" y="55" text-anchor="middle" stroke="black">SVG</text>
    </a>
  </svg>
</div>
<div class="exemple none">
  <span>pointer-events : none : </span>
  <div class="svghidden">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
      <a xlink:href="https://www.google.fr" target="_blank">
        <rect x="10" y="10" width="88" height="88" stroke="green" fill="mediumaquamarine" stroke-width="6"/> 
        <text x="50" y="55" text-anchor="middle" stroke="black">SVG</text>
      </a>
    </svg>
  </div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <a xlink:href="https://www.google.fr" target="_blank">
      <rect x="10" y="10" width="88" height="88" stroke="green" fill="mediumaquamarine" stroke-width="6"/> 
      <text x="50" y="55" text-anchor="middle" stroke="black">SVG</text>
    </a>
  </svg>
</div>
<div class="exemple all">
  <span>pointer-events : all : </span>
  <div class="svghidden">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
      <a xlink:href="https://www.google.fr" target="_blank">
        <rect x="10" y="10" width="88" height="88" stroke="green" fill="mediumaquamarine" stroke-width="6"/> 
        <text x="50" y="55" text-anchor="middle" stroke="black">SVG</text>
      </a>
    </svg> 
  </div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <a xlink:href="https://www.google.fr" target="_blank">
      <rect x="10" y="10" width="88" height="88" stroke="green" fill="mediumaquamarine" stroke-width="6"/> 
      <text x="50" y="55" text-anchor="middle" stroke="black">SVG</text>
    </a>
  </svg> 
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <a xlink:href="https://www.google.fr" target="_blank">
      <rect x="10" y="10" width="88" height="88" stroke="green" fill="none" stroke-width="6"/> 
      <text x="50" y="55" text-anchor="middle" stroke="black">SVG</text>
    </a>
  </svg>
</div>
<div class="exemple stroke">
  <span>pointer-events : stroke : </span>
  <div class="svghidden">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
      <a xlink:href="https://www.google.fr" target="_blank">
        <rect x="10" y="10" width="88" height="88" stroke="green" fill="mediumaquamarine" stroke-width="6"/> 
        <text x="50" y="55" text-anchor="middle" stroke="black">SVG</text>
      </a>
    </svg>
  </div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <a xlink:href="https://www.google.fr" target="_blank">
      <rect x="10" y="10" width="88" height="88" stroke="green" fill="mediumaquamarine" stroke-width="6"/> 
      <text x="50" y="55" text-anchor="middle" stroke="black">SVG</text>
    </a>
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <a xlink:href="https://www.google.fr" target="_blank">
      <rect x="10" y="10" width="88" height="88" stroke="green" fill="none" stroke-width="6"/> 
      <text x="50" y="55" text-anchor="middle" stroke="black">SVG</text>
    </a>
  </svg>
</div>
<div class="exemple fill">
  <span>pointer-events : fill : </span>
  <div class="svghidden">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
      <a xlink:href="https://www.google.fr" target="_blank">
        <rect x="10" y="10" width="88" height="88" stroke="green" fill="mediumaquamarine" stroke-width="6"/> 
        <text x="50" y="55" text-anchor="middle" stroke="black">SVG</text>
      </a>
    </svg>
  </div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <a xlink:href="https://www.google.fr" target="_blank">
      <rect x="10" y="10" width="88" height="88" stroke="green" fill="mediumaquamarine" stroke-width="6"/> 
      <text x="50" y="55" text-anchor="middle" stroke="black">SVG</text>
    </a>
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <a xlink:href="https://www.google.fr" target="_blank">
      <rect x="10" y="10" width="88" height="88" stroke="green" fill="none" stroke-width="6"/> 
      <text x="50" y="55" text-anchor="middle" stroke="black">SVG</text>
    </a>
  </svg>
</div>
<div class="exemple painted">
  <span>pointer-events : painted : </span>
  <div class="svghidden">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
      <a xlink:href="https://www.google.fr" target="_blank">
        <rect x="10" y="10" width="88" height="88" stroke="green" fill="mediumaquamarine" stroke-width="6"/> 
        <text x="50" y="55" text-anchor="middle" stroke="black">SVG</text>
      </a>
    </svg>
  </div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <a xlink:href="https://www.google.fr" target="_blank">
      <rect x="10" y="10" width="88" height="88" stroke="green" fill="mediumaquamarine" stroke-width="6"/> 
      <text x="50" y="55" text-anchor="middle" stroke="black">SVG</text>
    </a>
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <a xlink:href="https://www.google.fr"  target="_blank">
      <rect x="10" y="10" width="88" height="88" stroke="green" fill="none" stroke-width="6"/> 
      <text x="50" y="55" text-anchor="middle" stroke="black">SVG</text>
    </a>
  </svg>
</div>
<div class="exemple visible">
  <span>pointer-events : visible : </span>
  <div class="svghidden">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
      <a xlink:href="https://www.google.fr" target="_blank">
        <rect x="10" y="10" width="88" height="88" stroke="green" fill="mediumaquamarine" stroke-width="6"/> 
        <text x="50" y="55" text-anchor="middle" stroke="black">SVG</text>
      </a>
    </svg>
  </div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <a xlink:href="https://www.google.fr" target="_blank">
      <rect x="10" y="10" width="88" height="88" stroke="green" fill="mediumaquamarine" stroke-width="6"/> 
      <text x="50" y="55" text-anchor="middle" stroke="black">SVG</text>
    </a>
  </svg>
</div>
<div class="exemple visibleStroke">
  <span>pointer-events : visibleStroke : </span>
  <div class="svghidden">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
      <a xlink:href="https://www.google.fr" target="_blank">
        <rect x="10" y="10" width="88" height="88" stroke="green" fill="mediumaquamarine" stroke-width="6"/> 
        <text x="50" y="55" text-anchor="middle" stroke="black">SVG</text>
      </a>
    </svg>
  </div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <a xlink:href="https://www.google.fr" target="_blank">
      <rect x="10" y="10" width="88" height="88" stroke="green" fill="mediumaquamarine" stroke-width="6"/> 
      <text x="50" y="55" text-anchor="middle" stroke="black">SVG</text>
    </a>
  </svg>
</div>
<div class="exemple visibleFill">
  <span>pointer-events : visibleFill : </span> 
  <div class="svghidden">
    <svg xmlns="http://www.w3.org/2000/svg"   viewBox="0 0 100 100">
      <a xlink:href="https://www.google.fr" target="_blank"> 
        <rect x="10" y="10" width="88" height="88" stroke="green" fill="mediumaquamarine" stroke-width="6"/> 
        <text x="50" y="55" text-anchor="middle" stroke="black">SVG</text>
      </a>
    </svg>
  </div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <a xlink:href="https://www.google.fr" target="_blank">
      <rect x="10" y="10" width="88" height="88" stroke="green" fill="none" stroke-width="6"/> 
      <text x="50" y="55" text-anchor="middle" stroke="black">SVG</text>
    </a>
  </svg>
</div>
<div class="exemple visiblePainted">
  <span>pointer-events : visiblePainted : </span>
  <div class="svghidden">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
      <a xlink:href="https://www.google.fr" target="_blank">
        <rect x="10" y="10" width="88" height="88" stroke="green" fill="mediumaquamarine" stroke-width="6"/> 
        <text x="50" y="55" text-anchor="middle" stroke="black">SVG</text>
      </a>
    </svg>
  </div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <a xlink:href="https://www.google.fr" target="_blank">
      <rect x="10" y="10" width="88" height="88" stroke="green" fill="mediumaquamarine" stroke-width="6"/> 
      <text x="50" y="55" text-anchor="middle" stroke="black">SVG</text>
    </a>
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <a xlink:href="https://www.google.fr" target="_blank">
      <rect x="10" y="10" width="88" height="88" stroke="green" fill="none" stroke-width="6"/> 
      <text x="50" y="55" text-anchor="middle" stroke="black">SVG</text>
    </a>
  </svg>
</div>