Можно ли манипулировать документом SVG, встроенным в документ HTML, с помощью JavaScript?
-
02-07-2019 - |
Вопрос
Я создал изображение 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-документа?
Решение
Решение:
в СВГ:
<script>document.method = function() {}</script>
в html (используя прототип для добавления прослушивателей событий):
<script>$("img").observe("load", function() {$("img").contentDocument.method()});
Вам нужно прослушать событие загрузки изображения.После загрузки изображения вы можете использовать element.contentDocument
для доступа к переменной документа в документе svg.Любые методы, добавленные к этому, будут доступны.
Другие советы
На самом деле все проще, чем вы ожидаете.На самом деле вам не нужно читать запутанное руководство, чтобы понять концепцию, и вам также не нужно использовать 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>
Несколько лет назад меня попросили создать игру на базе Ajax для двух игроков с использованием 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, но суть в этом.
Я бы сослался на доктора.Дэвид Дейли — самая потрясающая информация о SVG/JS, которую вы найдетеhttp://srufaculty.sru.edu/david.dailey/svg/
Я исследовал SVG с помощью JavaScript.Смотрите блог: Масштабирование графики SVG с помощью JavaScript
Также см. Плагин jQuery SVG
Для поддержки в IE6 посмотрите SVGWeb.
В примере кода, поставляемом с библиотекой, приведены примеры того, как манипулировать SVG с помощью JavaScript.
В архивах списка рассылки также имеется изрядное количество информации.