JQuery Draggable và <object> có SVG?

Question

Tôi có tệp SVG trong thẻ đối tượng hiển thị trong ô bảng và tôi muốn làm cho SVG có thể kéo trong ô bảng bằng cách sử dụng Draggable của JQuery. Mã này - trừ các bit khó hiểu trong thẻ, trông như thế này:

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

Nếu tôi đặt thẻ chính nó như kéo, kéo không hoạt động. Nếu tôi bọc thẻ trong một, và làm cho draggable, tôi có thể kéo bằng cách sử dụng lề của div, không phải bản thân SVG. Tôi đã thử đặt tay cầm của đối tượng SVG như sau:

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

nhưng điều đó cũng không thành công.

Có cách nào để làm cho đối tượng SVG có thể kéo được bằng cách nhấp và kéo bản thân SVG không?

Tôi thiết lập một ví dụ here trong trường hợp giúp xem nội dung tôi đang nói đến.

Answer 1

Nội dung HTML không thể xem sự kiện chuột trên nội dung của <object>. Các tập lệnh trong trang chỉ có thể truy cập dữ liệu tương tác chuột nếu trình cắm có trách nhiệm cố tình làm cho nó có sẵn thông qua giao diện tùy chỉnh.

Tôi khuyên bạn nên bao gồm nội dung SVG như một phần của trang, thay vì sử dụng <object>. Điều này có nghĩa là bạn sẽ phải phân phối trang dưới dạng application/xhtml+xml và thêm không gian tên cho các phần tử SVG. Example. Với SVG nội tuyến, các phần tử SVG tự phản ứng với các sự kiện chuột và có thể được viết kịch bản giống như các phần tử HTML.

Hạn chế của SVG nội tuyến là nó sẽ không hoạt động trên IE với trình cắm thêm SVG. Nhưng sau đó không ai đã sử dụng plug-in trong nhiều năm, và IE9 cũng sẽ hỗ trợ SVG nội dòng.

Answer 2

Trong trường hợp của tôi (Tôi đang viết ứng dụng chrome và SVG của tôi nằm trong một tệp riêng biệt), tôi có thể thay đổi thẻ đối tượng thành thẻ img với thuộc tính type được đặt thành "image/svg + xml, "và thuộc tính src được đặt thành đường dẫn đến tệp svg của tôi và giải quyết được sự cố cho tôi.

Số dặm của bạn có thể thay đổi trong các trình duyệt khác, nhưng nếu bạn đang viết cho webkit, cách tiếp cận này dường như hoạt động.