SVG中带有Atvise的Javascript

Question

I am new here, and I have questions over questions!

I work with a program called Atvise, that's a visualisation Software for PLC in building automation.Their I work with SVG and Javascript.

The following code works in an normal editor but not in the program Atvise!

 <?xml version='1.0'?>
<svg width="600" xmlns:ev="http://www.w3.org/2001/xml-events" version="1.1" xmlns="http://www.w3.org/2000/svg" height="500" baseProfile="tiny" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:atv="http://webmi.atvise.com/2007/svgext">
 <defs/>
 <metadata>
  <atv:gridconfig width="20" enabled="false" height="20" gridstyle="lines"/>
  <atv:snapconfig width="10" enabled="false" height="10"/>
 </metadata>
 <desc>Example script01 - invoke an ECMAScript function from an onclick event
  </desc>
 <!-- ECMAScript to change the radius with each click -->
 <!-- Outline the drawing area with a blue line -->
 <rect width="598" x="1" y="1" fill="none" height="498" stroke="blue" id="id_0" atv:refpx="300" atv:refpy="250"/>
 <!-- Act on each click event -->
 <circle fill="red" cx="300" cy="225" onclick="circle_click(evt)" r="200" id="id_1" atv:refpx="300" atv:refpy="225"/>
 <text x="300" y="480" font-family="Verdana" text-anchor="middle" id="id_2" atv:refpx="300" atv:refpy="466" font-size="35">
    Click on circle to change its size
  </text>
 <script type="text/ecmascript"><![CDATA[
function circle_click(evt) {
      var circle = evt.target;
      var currentRadius = circle.getAttribute("r");
      if (currentRadius == 100)
        circle.setAttribute("r", currentRadius*2);
      else
        circle.setAttribute("r", currentRadius*0.5);
    }

//test]]></script>
</svg>

The program manipulate this code to this(read from "view source code" from FF)

<svg xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:atv="http://webmi.atvise.com/2007/svgext" width="630" version="1.1" height="407" baseProfile="tiny" atv:oe="2E3C59J36BGCNDA0D9GBG4P7PAP26542417AJ8B6J5DBLDIDA1NERBO8SELF5DC4A" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 500">
 <defs/>
 <metadata/>
 <desc>Example script01 - invoke an ECMAScript function from an onclick event</desc>
 <!-- ECMAScript to change the radius with each click -->
 <!-- Outline the drawing area with a blue line -->

 <rect width="598" x="1" y="1" fill="none" height="498" stroke="blue" id="id_0" atv:refpx="300" atv:refpy="250"/>

 <!-- Act on each click event -->

 <circle fill="red" cx="300" cy="225" onclick="circle_click(evt)" r="200" id="id_1" atv:refpx="300" atv:refpy="225"/>

 <text x="300" y="480" font-family="Verdana" text-anchor="middle" 

id="id_2" atv:refpx="300" atv:refpy="466" font-size="35">Click on circle to change its size</text>
 <script xlink:href="../../webmi.js" type="text/ecmascript"/>
 <script type="text/ecmascript"><![CDATA[webMI.proxy({"":[function(webMI,window,document,self){function circle_click(evt) {
      var circle = evt.target;
      var currentRadius = circle.getAttribute("r");
      if (currentRadius == 100)
        circle.setAttribute("r", currentRadius*2);
      else
        circle.setAttribute("r", currentRadius*0.5);
    }

//test
},{},{}]},window);]]></script>
</svg>

and this doesn't work! I get following error from firebug "ReferenceError: circle_click is not defined"

I have much code that work, but only things in Javascript without DOM(?) manipulation.

Can everybody help me to understand the situation and how to write code that will work?

Answer 1

The manipulated SVG has moved your circle_click() function inside another function - an anonymous function that gets passed to webMI.proxy() . That means that circle_click() is now a private function that is only accessible from within the anonymous function.

I don't use Atvise, so I don't know if they have a recommended way of defining event handler functions.

In the meantime, you may be able to get it working by making sure your click handler is defined in the Window namespace. It will be visible to the event handling system then.

<script type="text/ecmascript"><![CDATA[

Window.circle_click = function(evt) {
  var circle = evt.target;
  var currentRadius = circle.getAttribute("r");
  if (currentRadius == 100)
    circle.setAttribute("r", currentRadius*2);
  else
    circle.setAttribute("r", currentRadius*0.5);
}

]]></script>