JQuery Draggable 和带有 SVG 的 <object>？

Posted 2023-05-08

【中文标题】JQuery Draggable 和带有 SVG 的 <object>？

【英文标题】：JQuery Draggable and an <object> with an SVG?

【发布时间】：2011-03-26 19:06:34

【问题描述】：

我在表格单元格中显示的对象标签中有一个 SVG 文件，我想使用 JQuery 的 Draggable 使 SVG 可在表格单元格中拖动。代码——减去标签中令人困惑的部分，如下所示：

<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 对象可拖动？

我设置了一个示例 here 以帮助了解我在说什么。

【参考方案1】：

html 内容无法看到<object> 内容上的鼠标事件。页面中的脚本只有在负责的插件故意通过自定义接口使其可用时才能访问鼠标交互数据。

我建议将 SVG 内容作为页面本身的一部分，而不是使用 <object>。这意味着您必须将页面作为application/xhtml+xml 提供服务，并为 SVG 元素添加命名空间。 Example。使用内联 SVG，SVG 元素本身可以响应鼠标事件，并且可以像 HTML 元素一样编写脚本。

内联 SVG 的缺点是它不能在带有 SVG 插件的 IE 上工作。但无论如何，多年来没有人使用该插件，IE9 也将支持内联 SVG。

【讨论】：

这就是我需要知道的。谢谢！我试图投票给你，但我是菜鸟，还做不到。

【参考方案2】：

就我而言（我正在编写一个仅限 chrome 的应用程序，并且我的 SVG 位于单独的文件中）我能够将 object 标签更改为 img 标签，并将 type 属性设置为“image/svg+xml”并将 src 属性设置为我的 svg 文件的路径，这为我解决了问题。

你的里程在其他浏览器中可能会有所不同，但如果你是为 webkit 编写的，这种方法似乎可行。

【讨论】：

是的，这种方法应该适用于所有最新的浏览器（Opera、Chrome、Firefox、IE9+）。请注意，通过 img 引用的 svg 文件没有启用脚本，并且某些浏览器会强制执行其他限制，例如不加载 svg 内的外部资源。