svg webtopoプロトタイプ(1)基本機能
3111 ワード
svgもhtml 5の基準の一つであることを考慮し、svgのtopoプロトタイプを暇を見つけて移植し続けることを考慮した.
抵抗:すでにwebtopologyオープンソースパッケージがあり、実現する機能は基本的に似ています.
vmlモデルの順序を参照して、まず基本的なテキストと線引き機能を実現します.
これまで前期探索ではie/operaの互換性,中国語処理など,矩形描画,線描画の探索が完了していた.そのため、基本的な機能は順調です.
主にテキスト、線の表示を実現します.
および基本的なjs操作の簡単なパッケージ.
ie+asvとoperaを互換性があります.
ieはembedを使用し、operaは動的に作成されます.
注意:operaではstyleを指定しないとデフォルトの線は見えません.
テストページ1 basic.htm
空のsvgは、最下位として1つのg 1しか含まれていません.同時にコードを設定して、中国語の表示をサポートすることができます
empty.svg
基本パッケージのsvg.js
http://download.csdn.net/detail/luqin1988/5005164
ブラウザにまたがる移動、ズーム、3 D、フィルターの特効、アニメーション、パチンコ、図面描画、SVGゲームなど、多くのモデルを研究しています.必要に応じてメッセージを残してください.
抵抗:すでにwebtopologyオープンソースパッケージがあり、実現する機能は基本的に似ています.
vmlモデルの順序を参照して、まず基本的なテキストと線引き機能を実現します.
これまで前期探索ではie/operaの互換性,中国語処理など,矩形描画,線描画の探索が完了していた.そのため、基本的な機能は順調です.
主にテキスト、線の表示を実現します.
および基本的なjs操作の簡単なパッケージ.
ie+asvとoperaを互換性があります.
ieはembedを使用し、operaは動的に作成されます.
注意:operaではstyleを指定しないとデフォルトの線は見えません.
テストページ1 basic.htm
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>
</title>
<!-- legengd.html
1. 、
2. ie opera.ie embed(empty.svg, g1),
opera create
-->
</head>
<script type="text/javascript" language="javascript" src=".\js\svg.js"></script>
<script>
</script>
<body bgcolor="#ffffff">
<div id="divsvg">
<embed name="svg1" pluginspage="http://www.adobe.com/svg/viewer/install/" align="top" src="empty.svg" height=10 width=10 type="image/svg+xml">
</div>
</body>
<script>
var svg;
var plat;
function show(){
//var svg;
//ie embed svg
svg=initSVG(200,200,1);
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>
空のsvgは、最下位として1つのg 1しか含まれていません.同時にコードを設定して、中国語の表示をサポートすることができます
empty.svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" >
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="g1">
</g>
</svg>
基本パッケージのsvg.js
http://download.csdn.net/detail/luqin1988/5005164
ブラウザにまたがる移動、ズーム、3 D、フィルターの特効、アニメーション、パチンコ、図面描画、SVGゲームなど、多くのモデルを研究しています.必要に応じてメッセージを残してください.