JQuery Draggable und <object> mit einem SVG?

Question

Ich habe eine SVG-Datei innerhalb eines Objekt-Tags, die in einer Tabellenzelle angezeigt wird, und ich möchte das SVG innerhalb der Tabellenzelle mit JQuery Draggable ziehen lassen. Der Code - minus die verwirrenden Bits in dem Tag, sieht wie folgt aus:

<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>  

Wenn ich den Tag selbst als ziehbar gesetzt, ziehbar funktioniert nicht. Wenn ich das Tag in a einpacke und es ziehbar mache, kann ich mit dem Rand des div ziehen, nicht mit dem SVG selbst. Ich habe versucht, das Handle des auf das SVG-Objekt wie folgt zu setzen:

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

aber das ist auch fehlgeschlagen.

Gibt es eine Möglichkeit das SVG Objekt ziehbar durch Klicken und Ziehen der SVG selbst zu machen?

stelle ich ein Beispiel here bei bis das sehen, was ich rede hilft.

Answer 1

HTML-Inhalte erhalten keine Mausereignisse auf dem Inhalt <object> zu sehen. Skripts auf der Seite können nur auf Mausinteraktionsdaten zugreifen, wenn das Plug-in es absichtlich über eine benutzerdefinierte Schnittstelle verfügbar macht.

Ich schlage vor, einschließlich der SVG-Inhalt als Teil der Seite selbst, anstatt <object> verwenden. Das bedeutet, dass Sie die Seite als application/xhtml+xml bereitstellen und einen Namespace für die SVG-Elemente hinzufügen müssen. Example. Mit Inline-SVG reagieren die SVG-Elemente selbst auf Mausereignisse und können wie die HTML-Elemente gescriptet werden.

Der Nachteil von Inline-SVG ist, dass es nicht mit der SVG-Plug-in auf IE funktionieren. Aber dann hat sowieso niemand das Plug-in seit Jahren benutzt, und IE9 wird auch Inline-SVG unterstützen.

Answer 2

In meinem Fall (Ich schreibe nur eine Chrome-App und meine SVGs sind in einer separaten Datei) Ich konnte die Objekt-Tag zu einem img-Tag mit dem Typ-Attribut auf "image/svg + xml" ändern "und das Attribut src auf den Pfad zu meiner Svg-Datei gesetzt, und das hat das Problem für mich gelöst.

Ihre gebrauchten Autos in anderen Browsern unterschiedlich sein können, aber wenn Sie für webkit schreiben, scheint dieser Ansatz zu arbeiten.