天天看點

svg webtopo原型2基本功能,縮放

?ヤ??ヨ?瀹??扮緝?懼???斤?灏辨??浜?寰?澶????叉??锛???璐圭???堕?磋??洪?????

??璁轟?璁詫?svg宸茬?缁?杩?浜?xm??????锛???浠ュ??dhtml婧朵負涓?浣?浜?锛?瀹???涓?杩?????涓?浜?宸?璺?????

ie ??adobe svgviewer灏辨?翠??ㄨ?翠?锛??╁??姝㈡?存?頒???浣???瀹??????借???寰?涓?????锛???蹇靛??

Opera涓?涓?????ASV??浠剁???ㄥ?????斤?渚?濡??ョ??婧?????缂╂?劇????

褰???vg??韬???????缂╂?劇??锛??規?涓???涓?绉???

??浠ョ??iewbox,涔???浠ョ??ransform.

?ョ??婧???杩?涓????芥病??锛?灏辨??杈?璐瑰?蹭???涓昏?褰卞??瀵煎?哄???姐??

缁?杩???澶?灏?璇?锛?缁?浜?涔???浠ョ???版???浜??????ヨ?????杩?innerHTML.

浣?????瑕??ョ??澶?妗???innerhtml,??涓??芥?ョ??svg??绱???韬?????

涓?杩?淇?瀛?杩???涓???棰?锛?opera涓?????SaveAS???戒護??

??姝f?绀哄????涔?????璋?锛?澶т?浜?浠ュ??浼??版???″?ㄥ??涓?杞藉????

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.?煎??e??opera浠ュ??chrome frame.myie浣跨?ㄥ?ㄦ??embed
  chome??opera??reate
 3.涓轟?淇?璇?embed??杞藉??姣?锛?棰???杩?琛?svg??濮???
-->
</head>
<script type="text/javascript" language="javascript" src=".\js\svg.js"></script>
<script>

</script>

<body bgcolor="#ffffff">

<br>
<button 慰nclick="show()">寮?濮?</button><br>
<button 慰nclick="zoom(0.5)">缂╁?2??cor</button><br>
<button 慰nclick="zoom(2)">?懼ぇ 2??cor</button><br>
<button 慰nclick="zoom(1)">杩???</button><br>
<button 慰nclick="zoom1(2)">test</button><br>
<button 慰nclick="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');
  //涓??界??tyle?ユ?懼ぇ
  //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>
           

?

繼續閱讀