JQuery Draggable y <object> con un SVG?

Question

Tengo un archivo SVG dentro de una etiqueta de objeto que se muestra en una celda de tabla, y quiero hacer que el SVG se pueda arrastrar dentro de la celda de la tabla usando JQuery's Draggable. El código - menos los bits confusos en la etiqueta, se ve así:

<div id="container"> 
<div id="box"> 
    <table align="center" border="1"> 
     <tr> 
      <td valign="middle">button</td> 
      <td valign="top" id="objtd"> 
       <div id="objdiv1"> 
        <object id="svgobject1">blah, blah</object> 
       </div> 
      </td> 
      <td valign="middle">button</td> 
     </tr>  

Si fijo la propia etiqueta como desplazable, que pueden arrastrarse no funciona. Si envuelvo la etiqueta en a, y hago que se pueda arrastrar, puedo arrastrar usando el margen de div, no el SVG. Intenté configurar el control del objeto SVG de esta manera:

$('#objdiv1').draggable({ handle: '#svgobject1' }); 

pero eso también falló.

¿Hay alguna manera de hacer que el objeto SVG se pueda arrastrar haciendo clic y arrastrando el SVG mismo?

Configuré un ejemplo here en caso de que eso ayudara a ver de lo que estoy hablando.

Answer 1

El contenido HTML no puede ver los eventos del mouse en los contenidos de <object>. Los scripts de la página solo pueden acceder a los datos de interacción del mouse si el responsable del complemento los pone a disposición deliberadamente a través de una interfaz personalizada.

Sugiero incluir el contenido de SVG como parte de la página, en lugar de usar <object>. Esto significa que deberá servir la página como application/xhtml+xml y agregar un espacio de nombre para los elementos SVG. Example. Con SVG en línea, los propios elementos SVG responden a los eventos del mouse y pueden ser guionados al igual que los elementos HTML.

El inconveniente de SVG en línea es que no funcionará en IE con el complemento SVG. Pero, de todos modos, nadie usó el complemento durante años, e IE9 también admitirá el SVG en línea.

Answer 2

En mi caso (estoy escribiendo solo una aplicación de cromo y mis archivos SVG están en un archivo separado) pude cambiar la etiqueta de objeto a una etiqueta img con el atributo de tipo establecido en "image/svg + xml, "y el atributo src establecido en la ruta a mi archivo svg, y eso me solucionó el problema.

Su kilometraje puede variar en otros navegadores, pero si está escribiendo para webkit, este enfoque parece funcionar.