svg webtopo原型2基本功能，缩放

最新推荐文章于 2025-05-28 09:00:02 发布

laputa73

最新推荐文章于 2025-05-28 09:00:02 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： svg web编程文章标签： opera chrome function javascript adobe ie

本文链接：https://blog.youkuaiyun.com/laputa73/article/details/7681727

web编程同时被 2 个专栏收录

54 篇文章

订阅专栏

svg

9 篇文章

订阅专栏

本文介绍了在实现SVG WebTopo原型过程中遇到的缩放功能实现难题，讨论了SVG在不同浏览器（如IE、Opera、Chrome）中的兼容性问题。虽然SVG标准旨在与DHTML融合，但在实际应用中仍存在一些差距。针对IE的Adobe SVGViewer功能，以及Opera浏览器不支持的部分功能，作者进行了深入研究，最终找到了通过innerHTML查看和处理SVG源码的方法。然而，保存SVG在某些浏览器（如Opera）中仍然存在问题，但作为原型演示，可以通过上传服务器后再下载的方式解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

接下来要实现缩放功能，就有了很多的曲折，耗费的时间超出预期。

理论上讲，svg已经经过了xm标准化，可以和dhtml溶为一体了，实际上还是有一些差距的。

ie 的adobe svgviewer就更不用说了，早停止更新了。但是它的功能还是很不错的，怀念啊

Opera上不支持ASV插件的部分功能，例如查看源码、缩放等。

当然svg本身是支持缩放的，方法不只一种。

可以用viewbox,也可以用transform.

查看源码这个功能没有，就比较费劲了。主要影响导出功能。

经过反复尝试，终于也可以看到源码了。原来还是通过innerHTML.

但是需要查看外框的innerhtml,而不能查看svg元素自身的。

不过保存还是个问题，opera不支持SaveAS的命令。

反正演示原型也无所谓，大不了以后传到服务器再下载回来

2basic.htm

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>
图例
</title>
 <meta http-equiv="X-UA-Compatible" content="chrome=1">
<!-- legengd.html
 1.显示文字、线
 2.兼容ie和opera以及chrome frame.myie使用动态embed
  chome和opera用create
 3.为了保证embed加载完毕，预先进行svg初始化
-->
</head>
<script type="text/javascript" language="javascript" src=".\js\svg.js"></script>
<script>

</script>

<body bgcolor="#ffffff">

<br>
<button onclick="show()">开始</button><br>
<button onclick="zoom(0.5)">缩小2倍cor</button><br>
<button onclick="zoom(2)">放大 2倍cor</button><br>
<button onclick="zoom(1)">还原</button><br>
<button onclick="zoom1(2)">test</button><br>
<button onclick="showsrc()">源码</button><br>

<div id="divsvg"></div>
</body>
<script>
var svg;
var plat;
svg=initSVG(200,200);
function zoom1(h)
{
 //svg.setAttribute("viewBox","0 0 "+200/h+" "+200/h);
  //var svgdoc=getSVGDocument(svg);
  //var plat=svgdoc.getElementById('g1');
  //var svg1=document.getElementById("divsvg");
  //var plat=svgdoc.getElementById('line1');
  //不能用style来放大
  //plat.getStyle().setProperty("zoom","2");
  //改颜色是可以的，只有ie支持 getStyle函数
  //plat.getStyle().setProperty("stroke","red","");
  //svg.style.zoom=h;
}



function show(){
 //var svg;
 //svg=initSVG(200,200);
 var svgdoc;
 svgdoc=getSVGDocument(svg);
 plat=getrootg(svg,svgdoc);

 //位置为相对位置
 //超出范围会被截掉
 //注意多次点，会重复创建
 //生成一行文本
 curentStyle="stroke:black;fill:white";
 createText(svgdoc,5,20,"电路带宽图例",curentStyle);
 //生成一个矩形
 curentStyle="stroke:black;fill:green";
 createrect(svgdoc,100,100,3,curentStyle);
 //生成一条线
 curentStyle="stroke:black;fill:none;stroke-width:1";
 createline(svgdoc,0,0,200,0,curentStyle);
 curentStyle="stroke:red;fill:none;stroke-width:3";
 createline(svgdoc,0,0,0,200,curentStyle);
 curentStyle="stroke:blue;fill:none;stroke-width:5";
 createline(svgdoc,0,0,200,200,curentStyle);
 curentStyle="stroke:#3366ff;fill:red;stroke-width:5";
 createline(svgdoc,100,0,100,200,curentStyle);
 }
</script>
</html>