Pass data / variable PHP to modal Bootstrap 3 from SVG path

I have this that launches a modal Bootstrap 3 with an input that collects the value of data-id but it does not work when I ask it from the SVG path, it launches the modal correctly , but without the value data-id.

However from a current link yes. Does anyone know if I'm ignoring some kind of SVG element?

<svg id="svgCapa83346623" xmlns="http://www.w3.org/2000/svg" style="display: inline; width: 100%; height: 88%;background-color:#c7e6f6;margin-top:25px;" version="1.1">
<a data-id="mi variable o dato" id="modal-918098" href="#modal-container-918098" class="open-AddBookDialog" data-toggle="modal">

        <path id="12345678"class="inactius" d="m 158.50293,69.162684 -0.47152,0.235741 -0.70725,-0.707224 -2.12177,1.178717 z" 
        onmouseover="evt.target.setAttribute(\'opacity\', \'0.5\');" 
        onmouseout="evt.target.setAttribute(\'opacity\', \'1\');"></path>
        </a>
 </svg>   


    <!--modal-->
        <div class="modal fade" id="modal-container-918098" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-body">
        <input type="text" name="bookId" id="bookId" value="" />
                                </div>
                            </div>  
                        </div>
                    </div>


    <script>
        $(document).on("click", ".open-AddBookDialog", function (e) {

        e.preventDefault();

        var _self = $(this);

        var myBookId = _self.data('id');
        $("#bookId").val(myBookId);

        $(_self.attr('href')).modal('show');
    });

    </script>