<button> element inside svg?
<p>I have an interactive SVG - displayed at full window size. I want to add some buttons to it. Is it possible to add normal <code>&lt;button&gt;</code> elements inside <code>&lt;svg&gt;</code> tag?<br>
I think not, but I'm asking if there is something similar for SVG.<br>
 From some drawing I get bad results like this:<br>
<a href="https://jsfiddle.net/pvxr6g8k/1/" rel="noreferrer">https://jsfiddle.net/pvxr6g8k/1/</a></p>

<pre><code>&lt;svg version="1.1" id="svg9723" height="768" width="1268"&gt;
&lt;g style="fill:#e6e6e6" id="g3332-7" transform="matrix(0.27404175,0,0,-0.447665,86.580009,508.16151)"&gt;
      &lt;g style="fill:#e6e6e6" clip-path="url(#clipPath3336-0-0)" id="g3334-7"&gt;
        &lt;g style="fill:#e6e6e6" transform="translate(992.5469,164.3086)" id="g3340-6"&gt;
          &lt;path inkscape:connector-curvature="0" id="path3342-2" style="fill:#e6e6e6;stroke:#241a5d;stroke-width:4.48957968;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" d="m 0,0 c -6.937,0 -12.58,5.645 -12.58,12.58 l 0,63.277 c 0,6.937 5.643,12.581 12.58,12.581 l 279.488,0 c 6.936,0 12.58,-5.644 12.58,-12.581 l 0,-63.277 C 292.068,5.645 286.424,0 279.488,0 L 0,0 Z"&gt;&lt;/path&gt;
        &lt;/g&gt;
      &lt;/g&gt;
    &lt;/g&gt;
    &lt;text transform="scale(0.9324557,1.072437)" id="text3390-1" style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:11.87269115px;font-family:'Times New Roman';-inkscape-font-specification:'Times New Roman, Bold';writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none" x="413.18262" y="390.15326"&gt;
      &lt;tspan style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:Arial;-inkscape-font-specification:'Arial Bold'" y="390.15326" x="413.18262" id="tspan3392-0" sodipodi:role="line"&gt;BUTTON&lt;/tspan&gt;
    &lt;/text&gt;
    &lt;/svg&gt;
</code></pre>

<p>The problem is not the visual appearance, but the structure, which not allow me to bind event or interact with it using JS. Not to mention the visual click effect of button "press" is harder to achieve like that.</p>

<p>So what is the solution for buttons in interactive SVG? Any good element like button in HTML?</p>

<p>I don't have to embed html button,  any good button replacement would be fine</p>