svg event

HTML

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<body>
    <p> clicked object: </p> <button id="test" >id</button>

    <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1" id="svgGreen" 
         style="clip-path: url('#clip1'); position:fixed; left:10px; top: 100px; ">
        <g>
            <defs>
                <clipPath id="clip1" style="stroke: black; stroke-width:3; fill: none;">
                    <path d="M0 0 l 200 0 l 0 200 Z"></path>
                </clipPath>
            </defs>
            <rect x="0" y="0" width="200" height="200" fill="green" style="clip-path: url('#clip1'); " id="green"></rect>
        </g>
    </svg>
    <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1" id="svgRed"
         style="clip-path: url('#clip2'); position:fixed; left:10px; top: 100px; ">
        <g >
            <defs>
                <clipPath id="clip2" style="stroke: black; stroke-width:3; fill: none;" >
                    <path d="M0 0 l 200 200 l -200 0 Z"></path>
                </clipPath>
            </defs>
            <rect x="0" y="0" width="200" height="200" fill="red" style="clip-path: url('#clip2'); " id="red"></rect>
        </g>
    </svg>
 </body>

CSS

svg { pointer-events: none; }
svg * { pointer-events: all; }

JavaScript

var zvalmax = 2;
        $("[id^='svg']").draggable({
            scroll: false,
            start: function (e) {
                $(this).css("z-index", ++zvalmax);
            },
            stop: function (e) {
               
            }
        });
document.onmousedown=who
function who(e) {
    var id=e.target.id;
    $("#test").html(id);
}