title: svg element covers links
body: <p>I have a big svg element on the top of the website. It is set "absolute" and there are links on top of invisible parts of the svg. These links are somehow not active and I can't make it work with "z-index". As soon as they are out of reach of the svg, they are active as usual. Is there another parameter apart from "z-index" I can use to prevent this happening?</p>
  
  <pre><code>&lt;html&gt;
  &lt;defs&gt; 
      &lt;symbol id="svg1"&gt;
              &lt;path id="headcurve1" d="M739.009,0H0.078L0,61.997c266.167-18.812,518.333,4.271,739.134,62.977L739.009,0z"&gt;
       &lt;/symbol&gt;  
         &lt;filter id="f5" width="120%" height="120%"&gt;
           &lt;feGaussianBlur in="SourceAlpha" stdDeviation="1.5"result="out1"/&gt;
              &lt;feOffset in="out1" dx=".1" dy=".1" result="out2" /&gt;
            &lt;feMerge&gt;
              &lt;feMergeNode in="out2" /&gt;
              &lt;feMergeNode in="SourceGraphic" /&gt;
            &lt;/feMerge&gt;
         &lt;/filter&gt;
   &lt;/defs&gt;
  
      &lt;div id="sidemenu"&gt;
         &lt;h2&gt;Aktuelles&lt;/h2&gt;
          &lt;br&gt;
          &lt;a&gt;several links&lt;/a&gt;
          &lt;a&gt;several links&lt;/a&gt;
          &lt;a&gt;several links&lt;/a&gt;
      &lt;/div&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>#headcurve1 {
  position: absolute;
  top: 0;
  z-index: 2;
  }
  
  #sidemenu {
  width: 250px;
  float: right;
  margin-top: 25px;
  margin-right: 20px;
  z-index: 20;
  {
  </code></pre>