JQuery Draggable и <object>с SVG?

Question

У меня есть SVG-файл в теге объекта, отображаемый в ячейке таблицы, и я хочу сделать SVG перетаскиваемым внутри ячейки таблицы, используя JQuery Draggable. Код - без запутанных битов в теге, выглядит так:

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

Если я установлю сам тег как перетаскиваемый, он не будет работать. Если я оберну тэг в a и сделаю перетаскиваемый элемент, я могу перетаскивать его, используя поле div, а не сам SVG. Я попытался установить дескриптор объекта SVG следующим образом:

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

но это тоже не удалось.

Есть ли способ сделать объект SVG перетаскиваемым, нажав и перетащив сам SVG?

Я настроил пример здесь на случай, если это поможет понять, о чем я говорю.

Answer 1

HTML-контент не может видеть события мыши на содержимом <object>. Сценарии на странице могут получать доступ к данным о взаимодействии с мышью, только если ответственный модуль намеренно делает их доступными через пользовательский интерфейс.

Я предлагаю включать содержимое SVG как часть самой страницы, а не использовать <object>. Это означает, что вам придется обслуживать страницу как application/xhtml+xml и добавить пространство имен для элементов SVG. Пример . С помощью встроенного SVG элементы SVG сами реагируют на события мыши и могут быть написаны как сценарии HTML.

Недостаток встроенного SVG заключается в том, что он не будет работать в IE с подключаемым модулем SVG. Но тогда никто не использовал этот плагин в течение многих лет, и IE9 также будет поддерживать встроенный SVG.

Answer 2

В моем случае (я пишу приложение только для Chrome, и мои SVG находятся в отдельном файле), я смог изменить тег объекта на тег img с атрибутом type, установленным на «image / svg + xml» и атрибут src указывает путь к моему svg-файлу, и это решило проблему для меня.

Ваш пробег может отличаться в других браузерах, но если вы пишете для webkit, этот подход, кажется, работает.