[英]Javascript inside SVG with Atvise
我是新來的,對問題有疑問!
我使用名為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(?)操縱的東西。
大家可以幫助我了解情況以及如何編寫有效的代碼嗎?
操縱的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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.