title: How to toggle twitter bootstrap jquery dropdown by clicking on svg-path?
body: <p>I want to use a svg -element to "toggle" a dropdown (jquery twitter bootstrap) by clicking inside the -element. This is important because of complexe shaped dashboard elements. The toggle event should only be available if the mouse is inside the path element.
  I've build a <a href="http://jsfiddle.net/zNrcC/42/" rel="nofollow">jsfiddle example</a> to illustrate the problem. Because I'm a javasript newbie, it would be nice to get any hooks to get started. Thank you in advance!</p>
  
  <pre><code>&lt;html&gt;&lt;head&gt;&lt;title&gt;&lt;/title&gt;
      &lt;link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css"
      rel="stylesheet" media="screen"&gt;&lt;/head&gt;
  &lt;body&gt;
      &lt;div class="dropdown"&gt; &lt;a class="btn dropdown-toggle" data-toggle="dropdown" href="#"&gt;
      I want this action
      &lt;span class="caret"&gt;&lt;/span&gt;
    &lt;/a&gt;
          &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt;
              &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Action&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Another action&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Something else here&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="divider"&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Separated link&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="dropdown"&gt;
          &lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="150" height="30"
          id="Test"&gt; 
              &lt;a class="btn dropdown-toggle" data-toggle="dropdown" href="#"&gt;
              &lt;g
              transform="translate(0,-850)"
              id="layer1"&gt;
                  &lt;rect
                  class="dropdown-toggle"
                  width="150"
                  height="30"
                  ry="4"
                  x="0"
                  y="850"
                  id="rect3013"
                  style="fill:#ff0000;fill-opacity:1;stroke:none" /&gt;
              &lt;/g&gt;
          &lt;/a&gt;
                &lt;text
               x="60.42905"
               y="18.798733"&gt;
                   &lt;tspan
                 sodipodi:role="line"
                 id="tspan3852"
                 x="20"
                 y="18.798733"&gt;toggle from here
                   &lt;/tspan&gt;
              &lt;/text&gt;
          &lt;/svg&gt;
          &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt;
              &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Action&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Another action&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Something else here&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="divider"&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Separated link&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
      &lt;script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>