SVG实现温度计与管道动画效果资源-CSDN下载

共4个文件

js：2个

htm：1个

svg：1个

5星 · 超过95%的资源需积分: 50 40 浏览量 2013-06-24 23:10:03 上传评论 8 收藏 70KB ZIP 举报

SVG（Scalable Vector Graphics）是一种基于XML的矢量图像格式，它允许开发者创建可缩放的、清晰的图形，特别适用于网页和交互式应用程序。SVG的优势在于其内容是矢量形式，这意味着无论放大多少倍，图像都能保持清晰，且文件大小相对较小。在这个特定的案例中，“svg 动画管道效果”指的是使用SVG技术来创建动态的管道展示，可能是模拟液体流动或温度变化等情境。这种效果通常用于数据可视化，比如模拟仪表盘或者监控系统中的各种参数变化。描述中提到SVG动画是通过jQuery的AJAX（Asynchronous JavaScript and XML）方法与Web服务进行交互，以获取实时数据。AJAX允许在不刷新整个页面的情况下从服务器获取并更新内容，提升用户体验。在这里，这个过程可能是用来更新SVG元素的数据，比如温度计的刻度或者管道中的“液体”高度，以反映实时变化。 jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理、动画以及Ajax交互等任务。版本1.8.0是jQuery的一个稳定版本，提供了一套完整的API来实现上述功能。 `svg.js`文件很可能是用于操作SVG元素和创建动画的核心脚本。这个库可能提供了简便的方法来创建、修改SVG元素，并实现平滑的动画效果。它可能包括了对SVG元素的选取、属性设置、事件绑定以及动画帧的控制等功能。 `lnhld.svg`很可能是一个包含管道图形的SVG文件。此文件可能定义了管道的形状、颜色和其他视觉细节，可以被`svg.js`脚本动态修改以显示动画效果。SVG文件内部可以包含多个路径（path）、圆（circle）、矩形（rect）等元素，这些元素可以通过JavaScript进行操作。在兼容性方面，描述提到动画效果在IE10下存在问题，这可能与IE10对SVG或CSS3动画支持的局限性有关。其他现代浏览器如Chrome、Firefox、Safari和Edge通常能更好地支持SVG和相关的JavaScript API，因此在这些浏览器上动画表现会更顺畅。总结起来，这个项目展示了如何利用SVG、jQuery和自定义的JavaScript库来创建交互式的、数据驱动的动画效果，特别是对于显示温度计和管道这样的视觉元素。同时，这也提醒我们在开发过程中要考虑浏览器的兼容性问题，确保在广泛使用的浏览器上都能提供一致的用户体验。

资源推荐

资源详情

资源评论

收起资源包目录

SvgDemo.zip （4个子文件）

default.htm 6KB

jquery-1.8.0.min.js 90KB

lnhld.svg 310KB

svg.js 4KB

<html> <head> <title>SVG演示</title> <script src="jquery-1.8.0.min.js" type="text/javascript"></script> </head> <body style="margin: 0px; padding: 0px;"> <div style="text-align: center; background-color: #009694;"> <embed id="svgDoc" src="lnhld.svg" width='100%' height='100%' type="image/svg+xml" wmode='transparent'></embed>     </div> <script language="javascript" type="text/javascript"> var ip = "172.18.16.247"; var port = "8889" var tags = "\\TestTag\\mnl_1,\\TestTag\\mnl_1,\\TestTag\\mnl_1,\\TestTag\\mnl_1,\\TestTag\\mnl_1,\\TestTag\\mnl_1"; var svgDoc = null; var svgRoot = null; //SVG根元素 var svg_jzyl = null; var svg_jzwd = null; var svg_czyl = null; var svg_czwd = null; var svg_wd = null; var svg_yl = null; var svg_yll = null; //压力炉 var timer = null; /// <summary>启动定时刷新</summary> function Start() { InitSvgElement(); this.timer = setInterval("GetTagValues()", 1000); } /// <summary>启动定时刷新</summary> function Stop() { clearInterval(this.timer); } /// <summary>获取测点数据</summary> function GetTagValues() { try { $.ajax({ type: "POST", url: "../PsWebService.asmx/GetTagValues", data: { ip: ip, port: port, tagNames: tags }, dataType: 'xml', error: function (request) { alert("调用webService异常"); }, success: function (msg) { var tagValueJSON = $(msg).find("string").text(); UpdateTagLables(tagValueJSON); } }); } catch (e) { alert(e.Message); } } /// <summary>初始化SVG元素</summary> function InitSvgElement() { this.svgDoc = document.getElementById('svgDoc').getSVGDocument(); this.svgRoot = this.svgDoc.documentElement; this.svg_jzwd = this.svgDoc.getElementById("tspan-jzwd"); this.svg_jzyl = this.svgDoc.getElementById("tspan-jzyl"); this.svg_czyl = this.svgDoc.getElementById("tspan-czyl"); this.svg_czwd = this.svgDoc.getElementById("tspan-czwd"); this.svg_yl = this.svgDoc.getElementById("tspan-yl"); this.svg_wd = this.svgDoc.getElementById("tspan-wd"); this.svg_yll = this.svgDoc.getElementById("rect-ylg"); } /// <summary>更新标签数据</summary> function UpdateTagLables(valueJSON) { var tagValueArray = eval('(' + valueJSON + ')'); if (tagValueArray.length != 6) { // alert("数据长度不足,请按照顺序设置测点!" + tagValueArray.length); return; } else { this.SetElementValue(this.svg_jzwd, tagValueArray[0].Value, " ℃"); this.SetElementValue(this.svg_jzyl, tagValueArray[1].Value, " MPa"); this.SetElementValue(this.svg_czwd, tagValueArray[2].Value, " ℃"); this.SetElementValue(this.svg_czyl, tagValueArray[3].Value, " MPa"); this.SetElementValue(this.svg_wd, tagValueArray[4].Value, " ℃"); this.SetElementValue(this.svg_yl, tagValueArray[5].Value, " MPa"); var yl = (tagValueArray[5].Value / 1000) * 68; //当前值除以量程(1000)得到百分比,然后乘以压力计的最大宽度得出实际应该显示的高度 yl = CurrencyFormatted(yl); this.svg_yll.setAttributeNS(null, "width", yl); } } /// <summary>设置元素值,数据进行格式化保留两位小数</summary> function SetElementValue(element, value, unit) { var newValue = CurrencyFormatted(value); if ($.browser.msie&&$.browser.version=="8.0") { //IE 下的写法 element.getFirstChild().setNodeValue(newValue + unit); } if ($.browser.msie && $.browser.version == "9.0") { //IE 下的写法 element.firstChild.textContent = newValue + unit; } if ($.browser.msie && $.browser.version == "10.0") { //IE 下的写法 element.firstChild.textContent = newValue + unit; } if ($.browser.chrome) { //Chrome下的写法 element.firstChild.textContent = newValue + unit; } else { element.firstChild.textContent = newValue + unit; } } /// <summary>四舍五入保留两位小数</summary> function CurrencyFormatted(amount) { var i = parseFloat(amount); if (isNaN(i)) { i = 0.00; } var minus = ''; if (i < 0) { minus = '-'; } i = Math.abs(i); i = parseInt((i + .005) * 100); i = i / 100; s = new String(i); if (s.indexOf('.') < 0) { s += '.00'; } if (s.indexOf('.') == (s.length - 2)) { s += '0'; } s = minus + s; return s; } </script> </body> </html>

评论收藏

内容反馈