title: How can I pass ONLY clicks through a SVG with pointer-events?
body: <p>I have a SVG overlaying a div with a button. I know that i can pass mouse-events through the SVG by setting "pointer-events: none;" for my SVG. However when I do this the SVG wont recognize mouse-events anymore.</p>
  
  <pre><code>&lt;body&gt;
    &lt;div id="website"&gt;
      &lt;form action="input_button.htm"&gt;
        &lt;p&gt;
          &lt;textarea cols="20" rows="4" name="text"&gt;&lt;/textarea&gt;
          &lt;input type="button" name="Text 1" value="show text" 
           onclick="this.form.text.value='Test'"&gt;
        &lt;/p&gt;
      &lt;/form&gt;
    &lt;/div&gt;
    &lt;div id="svgRect"&gt;
      &lt;svg width="1845" height="140"&gt;
        &lt;rect id="r0"&gt;&lt;/rect&gt;
      &lt;/svg&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I want my SVG to be able to recognize when the mouse is over it but pass clicks to elements (divs/ buttons / ...) underneath itself.
  So my SVG should only be the target of hover-events and my button should be the target of click-events.</p>
  
  <p>Among some other approaches I tried it like this: - Nothing worked.</p>
  
  <pre><code>.on("mousedown", function(d,i){
     d3.select("#r0")
       .style("pointer-events", "none");
     d3.select("#website")
       .style("pointer-events", "auto");}
  .on("mouseup", function(d,i){
     d3.select("#r0")
       .style("pointer-events", "auto");
     d3.select("#website")
       .style("pointer-events", "none");
  }
  </code></pre>
  
  <p>The idea was to disable pointer-events when I press the mouse-button and enable them again when I release it.</p>
  
  <p>Does anyone know a solution or work-arround for this problem?
  Thanks!</p>