SVG中带有Atvise的Javascript

Question

我是新来的，对问题有疑问！

我使用名为Atvise的程序工作，该程序是楼宇自动化中PLC的可视化软件，它们使用SVG和Javascript。

以下代码在普通编辑器中有效，但在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>

程序对此代码进行处理（从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>

这是行不通的！ 我从萤火虫中收到以下错误：“ ReferenceError：未定义circle_click”

我有很多工作代码，但是只有Javascript中没有DOM（？）操纵的东西。

大家可以帮助我了解情况以及如何编写有效的代码吗？

Answer 1

操纵的SVG已将您的circle_click()函数移至另一个函数内-传递给webMI.proxy()的匿名函数。 这意味着circle_click()现在是一个私有函数，只能从匿名函数内部访问。

我不使用Atvise，所以我不知道他们是否具有定义事件处理程序功能的推荐方法。

同时，通过确保在Windows命名空间中定义了单击处理程序，您可以使它正常工作。 它将对事件处理系统可见。

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