Можно ли манипулировать документом SVG, встроенным в документ HTML, с помощью JavaScript?

Question

Я сделал SVG-изображение или, скорее, мини-приложение для просмотра графиков данных. Я хочу включить это в HTML-страницу и вызвать методы для SVG-изображения.

Пример:

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

Можно ли вообще вызывать методы в документе SVG? Если да, то как мне объявить методы для предоставления в SVG-файле и как их вызвать из документа HTML?

Answer 1

Решение:

в svg:

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

в html (используя прототип для добавления прослушивателей событий):

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

Вам необходимо прослушать событие загрузки на изображении. После загрузки изображения вы можете использовать element.contentDocument для доступа к переменной документа в документе svg. Любые методы, добавленные к этому, будут доступны.

Answer 2

На самом деле все проще, чем вы ожидаете. Вам не нужно читать сложное руководство, чтобы понять концепцию, и при этом вам не нужно использовать JQuery. Вот основной макет:

• Функция JavaScript в вашем HTML-документе.

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

• Элемент SVG, которым мы пытаемся манипулировать.

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

• Встроенная кнопка, которая запускает изменение. Обратите внимание, что в моем примере событие также может быть вызвано нажатием на сам куб.

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

Answer 3

Несколько лет назад меня попросили создать игру на основе Ajax для 2 игроков с использованием SVG. Возможно, это не совсем то решение, которое вы ищете, но оно может помочь вам прослушивать события в SVG. Вот SVG-контроллер:

Кстати, SVG перетаскивали (это был 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);
}

Мое приложение было чисто SVG + JavaScript, но в этом суть.

Answer 4

Я бы назвал доктора Дэвида Дейли самой потрясающей информацией о SVG / JS, которую вы найдете http://srufaculty.sru.edu/david.dailey/svg/

Answer 5

Также см. Плагин jQuery SVG

Answer 6

Я изучил SVG с помощью JavaScripts. Смотрите блог: Масштабирование SVG-графики с помощью JavaScripts

Answer 7

Для поддержки в IE6, посмотрите на SVGWeb .

В примере кода, поставляемом с библиотекой, приведены примеры того, как манипулировать SVG с помощью JavaScript.

В архивах списка рассылки также имеется достаточное количество информации.