Вызов функции JavaScript из файла SVG

Question

У меня есть файл SVG и файл JavaScript.

В моем файле SVG У меня есть некоторый код, но это небольшое количество кода, я задаюсь вопросом о:

<g id="zoomButton"> 
    <g onclick="zoom()" transform="scale(x,y)"> 
     <rect x="640" y="20" width="140" height="40" 
       style="fill:white;stroke:red;stroke-width:2" /> 
     <text x="710" y="49" 
       style="fill:red;font-size:25px;text-anchor:middle">Zoom</text> 
    </g> 
</g> 

Вы видите, что я хочу, чтобы функция zoom() будет вызываться при нажатии этой кнопки ,

Теперь в моем файле JavaScript, у меня есть эта функция называется zoom():

function zoom() { 
    alert("heyho"); 
} 

Однако эта функция не срабатывает при нажатии на кнопку, созданную в файле SVG. Я только получаю сообщение об ошибке:

Uncaught ReferenceError: zoom is not defined 

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

Кроме того, поскольку это функция масштабирования в конце концов, и я хочу сделать некоторое масштабирование, как мне получить доступ к x и y внутри transform="scale(x,y) в zoomButton в SVG-файле из файла JavaScript?

Edit:

Полный код в файле SVG выглядит следующим образом (game.svg):

<?xml version="1.0" encoding="utf-8"?> 
<svg width="800px" height="600px" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xhtml="http://www.w3.org/1999/xhtml" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    xmlns:a="http://www.adobe.com/svg10-extensions" a:timeline="independent" 
    onload="top.load(evt)"> 

    <defs> 
    <clipPath id="gameareaclip"> 
     <rect x="20" y="20" width="600" height="560"/> 
    </clipPath> 
    <pattern id="background_pattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"> 
     <rect width="20" height="20" style="fill:purple"/> 
     <circle cx="10" cy="10" r="8" style="fill:black"/> 
    </pattern> 
    <radialGradient id="player_color"> 
     <stop offset="0.0" style="stop-color:yellow;stop-opacity:1"/> 
     <stop offset="0.8" style="stop-color:yellow;stop-opacity:1"/> 
     <stop offset="1.0" style="stop-color:orange;stop-opacity:1"/> 
    </radialGradient> 
    </defs> 

    <rect width="100%" height="100%" style="fill:url(#background_pattern);stroke:orange;stroke-width:4" /> 

    <rect x="20" y="20" width="600" height="560" style="fill:black;stroke:red;stroke-width:5" /> 

    <!-- Add your button here --> 

    <g id="zoomKnapp"> 
    <g onclick="zoom()" transform="scale(x,y)"> 
    <rect x="640" y="20" width="140" height="40" 
      style="fill:white;stroke:red;stroke-width:2" /> 
    <text x="710" y="49" 
      style="fill:red;font-size:25px;text-anchor:middle">Zoom</text> 
    </g> 
</g> 

    <g style="clip-path:url(#gameareaclip)"> 
    <g transform="translate(20,20)"> 
     <g id="gamearea" transform="translate(0,0)" width="600" height="560"> 
     <rect x="0" y="0" width="600" height="560" style="fill:lightgrey" /> 

     <g id="platforms"> 

      <!-- Add your platforms here --> 

    <rect id="svg_37" height="20" width="300" y="100" x="0" stroke-linecap="null" stroke-linejoin="null" stroke-width="0" stroke="#000000" fill="#5fbf00"/> 
    <rect id="svg_38" height="20" width="300" y="170" x="300" stroke-linecap="null" stroke-linejoin="null" stroke-width="0" stroke="#000000" fill="#5fbf00"/> 
    <rect id="svg_39" height="20" width="300" y="240" x="0" stroke-linecap="null" stroke-linejoin="null" stroke-width="0" stroke="#000000" fill="#5fbf00"/> 
    <rect id="svg_40" height="20" width="300" y="310" x="300" stroke-linecap="null" stroke-linejoin="null" stroke-width="0" stroke="#000000" fill="#5fbf00"/> 
    <rect id="svg_41" height="20" width="300" y="380" x="0" stroke-linecap="null" stroke-linejoin="null" stroke-width="0" stroke="#000000" fill="#5fbf00"/> 
    <rect id="svg_42" height="20" width="300" y="450" x="300" stroke-linecap="null" stroke-linejoin="null" stroke-width="0" stroke="#000000" fill="#5fbf00"/> 

     </g> 

     <g id="player"> 
      <circle cx="20" cy="20" r="20" style="fill:url(#player_color);stroke:black;stroke-width:2"/> 
      <ellipse cx="15" cy="15" rx="3" ry="6" style="fill:black"/> 
      <ellipse cx="25" cy="15" rx="3" ry="6" style="fill:black"/> 
      <path d="M10,25 l20,0 q0,8 -10,8 t-10,-8" style="fill:orange;stroke:black;stroke-black:2"/> 
     </g> 
     </g> 
    </g> 
    </g> 
</svg> 

HTML-файл (game.html):

<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>SVG Game</title> 
    <script language="JavaScript" src="game.js"></script> 
</head> 

<body style="text-align: center"> 
    <embed src="game.svg" type="image/svg+xml" width="800" height="600" /> 
</body> 

</html> 

JavaScript (game.js) код:

// The point and size class used in this program 
function Point(x, y) { 
    this.x = (x)? parseFloat(x) : 0.0; 
    this.y = (y)? parseFloat(y) : 0.0; 
} 

function Size(w, h) { 
    this.w = (w)? parseFloat(w) : 0.0; 
    this.h = (h)? parseFloat(h) : 0.0; 
} 

// Helper function for checking intersection between two rectangles 
function intersect(pos1, size1, pos2, size2) { 
    return (pos1.x < pos2.x + size2.w && pos1.x + size1.w > pos2.x && 
      pos1.y < pos2.y + size2.h && pos1.y + size1.h > pos2.y); 
} 


function zoom() { 
    alert("heiho"); 
} 

// The player class used in this program 
function Player() { 
    this.node = svgdoc.getElementById("player"); 
    this.position = PLAYER_INIT_POS; 
    this.motion = motionType.NONE; 
    this.verticalSpeed = 0; 
} 

Player.prototype.isOnPlatform = function() { 
    var platforms = svgdoc.getElementById("platforms"); 
    for (var i = 0; i < platforms.childNodes.length; i++) { 
     var node = platforms.childNodes.item(i); 
     if (node.nodeName != "rect") continue; 

     var x = parseFloat(node.getAttribute("x")); 
     var y = parseFloat(node.getAttribute("y")); 
     var w = parseFloat(node.getAttribute("width")); 
     var h = parseFloat(node.getAttribute("height")); 

     if (((this.position.x + PLAYER_SIZE.w > x && this.position.x < x + w) || 
      ((this.position.x + PLAYER_SIZE.w) == x && this.motion == motionType.RIGHT) || 
      (this.position.x == (x + w) && this.motion == motionType.LEFT)) && 
      this.position.y + PLAYER_SIZE.h == y) return true; 
    } 
    if (this.position.y + PLAYER_SIZE.h == SCREEN_SIZE.h) return true; 

    return false; 
} 

Player.prototype.collidePlatform = function(position) { 
    var platforms = svgdoc.getElementById("platforms"); 
    for (var i = 0; i < platforms.childNodes.length; i++) { 
     var node = platforms.childNodes.item(i); 
     if (node.nodeName != "rect") continue; 

     var x = parseFloat(node.getAttribute("x")); 
     var y = parseFloat(node.getAttribute("y")); 
     var w = parseFloat(node.getAttribute("width")); 
     var h = parseFloat(node.getAttribute("height")); 
     var pos = new Point(x, y); 
     var size = new Size(w, h); 

     if (intersect(position, PLAYER_SIZE, pos, size)) { 
      position.x = this.position.x; 
      if (intersect(position, PLAYER_SIZE, pos, size)) { 
       if (this.position.y >= y + h) 
        position.y = y + h; 
       else 
        position.y = y - PLAYER_SIZE.h; 
       this.verticalSpeed = 0; 
      } 
     } 
    } 
} 

Player.prototype.collideScreen = function(position) { 
    if (position.x < 0) position.x = 0; 
    if (position.x + PLAYER_SIZE.w > SCREEN_SIZE.w) position.x = SCREEN_SIZE.w - PLAYER_SIZE.w; 
    if (position.y < 0) { 
     position.y = 0; 
     this.verticalSpeed = 0; 
    } 
    if (position.y + PLAYER_SIZE.h > SCREEN_SIZE.h) { 
     position.y = SCREEN_SIZE.h - PLAYER_SIZE.h; 
     this.verticalSpeed = 0; 
    } 
} 


// 
// Below are constants used in the game 
// 
var PLAYER_SIZE = new Size(40, 40);   // The size of the player 
var SCREEN_SIZE = new Size(600, 560);  // The size of the game screen 
var PLAYER_INIT_POS = new Point(0, 0);  // The initial position of the player 

var MOVE_DISPLACEMENT = 5;     // The speed of the player in motion 
var JUMP_SPEED = 15;      // The speed of the player jumping 
var VERTICAL_DISPLACEMENT = 1;    // The displacement of vertical speed 

var GAME_INTERVAL = 25;      // The time interval of running the game 


// 
// Variables in the game 
// 
var motionType = {NONE:0, LEFT:1, RIGHT:2}; // Motion enum 

var svgdoc = null;       // SVG root document node 
var player = null;       // The player object 
var gameInterval = null;     // The interval 
var zoom = 1.0;        // The zoom level of the screen 


// 
// The load function for the SVG document 
// 
function load(evt) { 
    // Set the root node to the global variable 
    svgdoc = evt.target.ownerDocument; 

    // Attach keyboard events 
    svgdoc.documentElement.addEventListener("keydown", keydown, false); 
    svgdoc.documentElement.addEventListener("keyup", keyup, false); 

    // Remove text nodes in the 'platforms' group 
    cleanUpGroup("platforms", true); 

    // Create the player 
    player = new Player(); 

    // Start the game interval 
    gameInterval = setInterval("gamePlay()", GAME_INTERVAL); 
} 


// 
// This function removes all/certain nodes under a group 
// 
function cleanUpGroup(id, textOnly) { 
    var node, next; 
    var group = svgdoc.getElementById(id); 
    node = group.firstChild; 
    while (node != null) { 
     next = node.nextSibling; 
     if (!textOnly || node.nodeType == 3) // A text node 
      group.removeChild(node); 
     node = next; 
    } 
} 


// 
// This is the keydown handling function for the SVG document 
// 
function keydown(evt) { 
    var keyCode = (evt.keyCode)? evt.keyCode : evt.getKeyCode(); 

    switch (keyCode) { 
     case "N".charCodeAt(0): 
      player.motion = motionType.LEFT; 
      break; 

     case "M".charCodeAt(0): 
      player.motion = motionType.RIGHT; 
      break; 


     // Add your code here 
     case "Z".charCodeAt(0): 
     if (player.isOnPlatform()) { 
      //Jump 
      player.verticalSpeed = JUMP_SPEED; 
     } 
      break; 


    } 
} 


// 
// This is the keyup handling function for the SVG document 
// 
function keyup(evt) { 
    // Get the key code 
    var keyCode = (evt.keyCode)? evt.keyCode : evt.getKeyCode(); 

    switch (keyCode) { 
     case "N".charCodeAt(0): 
      if (player.motion == motionType.LEFT) player.motion = motionType.NONE; 
      break; 

     case "M".charCodeAt(0): 
      if (player.motion == motionType.RIGHT) player.motion = motionType.NONE; 
      break; 
    } 
} 


// 
// This function updates the position and motion of the player in the system 
// 
function gamePlay() { 
    // Check whether the player is on a platform 
    var isOnPlatform = player.isOnPlatform(); 

    // Update player position 
    var displacement = new Point(); 

    // Move left or right 
    if (player.motion == motionType.LEFT) 
     displacement.x = -MOVE_DISPLACEMENT; 
    if (player.motion == motionType.RIGHT) 
     displacement.x = MOVE_DISPLACEMENT; 

    // Fall 
    if (!isOnPlatform && player.verticalSpeed <= 0) { 
     displacement.y = -player.verticalSpeed; 
     player.verticalSpeed -= VERTICAL_DISPLACEMENT; 
    } 

    // Jump 
    if (player.verticalSpeed > 0) { 
     displacement.y = -player.verticalSpeed; 
     player.verticalSpeed -= VERTICAL_DISPLACEMENT; 
     if (player.verticalSpeed <= 0) 
      player.verticalSpeed = 0; 
    } 

    // Get the new position of the player 
    var position = new Point(); 
    position.x = player.position.x + displacement.x; 
    position.y = player.position.y + displacement.y; 

    // Check collision with platforms and screen 
    player.collidePlatform(position); 
    player.collideScreen(position); 

    // Set the location back to the player object (before update the screen) 
    player.position = position; 

    updateScreen(); 
} 


// 
// This function updates the position of the player's SVG object and 
// set the appropriate translation of the game screen relative to the 
// the position of the player 
// 
function updateScreen() { 
    // Transform the player 
    player.node.setAttribute("transform", "translate(" + player.position.x + "," + player.position.y + ")"); 

    // Calculate the scaling and translation factors 

    // Add your code here 

} 

Answer 1

Тег сценария должен идти в SVG-файле (game.svg), а не в html-файле. Обратите внимание, что теги SVG script используют xlink: href вместо src как атрибут, который содержит источник скрипта.

<script xlink:href="game.js"></script> 

Вы должны также изменить onload="top.load(evt)" только onload="load(evt)" в корневом <svg> элемента.

И ваша третья и основная проблема заключается в том, что у вас есть функция zoom() и переменная с именем zoom на строке 114. Удалите переменную, поскольку она не используется, и метод масштабирования будет вызван.