Có thể thao tác một tài liệu SVG được nhúng trong tài liệu HTML với JavaScript không?

Question

Tôi đã tạo một hình ảnh SVG hoặc giống ứng dụng nhỏ hơn để xem biểu đồ dữ liệu. Tôi muốn bao gồm điều này trong một trang HTML, và các phương pháp gọi trên hình ảnh SVG.

Ví dụ:

<object id="img" data="image.svg" width="500" height="300"/> 
<script>document.getElementById("img").addData([1,23,4]);</script> 

Là nó ở tất cả có thể để gọi các phương thức trên các tài liệu SVG? Nếu vậy, làm cách nào để khai báo các phương thức để hiển thị trong tệp SVG và làm cách nào để gọi chúng từ tài liệu HTML?

Answer 1

Giải pháp:

trong svg:

<script>document.method = function() {}</script> 

trong html (sử dụng nguyên mẫu để thêm người nghe sự kiện):

<script>$("img").observe("load", function() {$("img").contentDocument.method()}); 

Bạn cần phải lắng nghe các sự kiện tải trên ảnh. Khi hình ảnh được tải, bạn có thể sử dụng element.contentDocument để truy cập biến tài liệu trên tài liệu svg. Mọi phương thức được thêm vào đó sẽ có sẵn.

Answer 2

Một vài năm trước, tôi được yêu cầu tạo một trò chơi dựa trên Ajax 2 người chơi bằng SVG. Nó có thể không chính xác là giải pháp bạn đang tìm kiếm, nhưng nó có thể giúp bạn lắng nghe các sự kiện trong SVG của bạn. Dưới đây là bộ điều khiển SVG:

FYI, các SVG đã được kéo và thả (đó là Stratego)

/****************** Track and handle SVG object movement *************/ 
var svgDoc; 
var svgRoot; 
var mover='';  //keeps track of what I'm dragging 

///start function//// 
//do this onload 
function start(evt){ 
    //set up the svg document elements 
    svgDoc=evt.target.ownerDocument; 
    svgRoot=svgDoc.documentElement; 
    //add the mousemove event to the whole thing 
    svgRoot.addEventListener('mousemove',go,false); 
    //do this when the mouse is released 
    svgRoot.addEventListener('mouseup',releaseMouse,false); 
} 

// set the id of the target to drag 
function setMove(id){ mover=id; } 

// clear the id of the dragging object 
function releaseMouse(){ 
    if(allowMoves == true){ sendMove(mover); } 
    mover=''; 
} 

// this is launched every mousemove on the doc 
// if we are dragging something, move it 
function go(evt){ 
    if(mover != '' && allowMoves != false) { 
     //init it 
     var me=document.getElementById(mover); 

     //actually change the location 
     moveX = evt.clientX-135; //css positioning minus 1/2 the width of the piece 
     moveY = evt.clientY-65; 
     me.setAttributeNS(null, 'x', evt.clientX-135); 
     me.setAttributeNS(null, 'y', evt.clientY-65); 
    } 
} 

function moveThis(pieceID, x, y) { 
    $(pieceID).setAttributeNS(null, 'x', x); 
    $(pieceID).setAttributeNS(null, 'y', y); 
} 

Ứng dụng của tôi là tinh khiết SVG + JavaScript, nhưng đây là ý chính của nó.

Answer 3

Tôi đã khám phá svg bằng JavaScripts. Xem blog: Scaling SVG Graphics with JavaScripts

Answer 4

tôi sẽ tham khảo Tiến sĩ David Dailey như SVG/info JS tuyệt vời nhất mà bạn sẽ tìm thấy http://srufaculty.sru.edu/david.dailey/svg/

Answer 5

Cũng thấy jQuery SVG plugin

Answer 6

Để được hỗ trợ trong IE6, có một cái nhìn tại SVGWeb.

Có các ví dụ về cách thao tác SVG với JavaScript trong mã mẫu được cung cấp cùng với thư viện.

Ngoài ra còn có một lượng thông tin hợp lý trong lưu trữ của danh sách gửi thư.

Answer 7

Mọi thứ thực sự đơn giản hơn bạn mong đợi. Bạn không thực sự cần đọc hướng dẫn phức tạp để hiểu khái niệm, bạn cũng không phải sử dụng JQuery. Đây là bố cục cơ bản:

• Hàm JavaScript trong tài liệu html của bạn.

  <script type="text/javascript"> 
  function change(){ 
      var s=document.getElementById("cube"); 
      s.setAttribute("stroke","0000FF"); 
  } 
  </script> 
  

• Phần tử SVG mà chúng tôi đang cố gắng thao tác.

  <svg width=100 height=100 style='float: left;'> 
      <rect x="10" y="10" width="60" height="60" id="cube" onclick="change()" stroke=#F53F0C stroke-width=10 fill=#F5C60C /> 
  </svg> 
  

• Nút nội tuyến sẽ kích hoạt thay đổi. Lưu ý rằng trong ví dụ của tôi, sự kiện cũng có thể được kích hoạt bằng cách nhấp vào chính khối đó.

  <button onclick="change()">Click</button>