diff --git a/ShadowEditor.SVG/dist/ShadowEditor.SVG.js b/ShadowEditor.SVG/dist/ShadowEditor.SVG.js
index d3de5f56..9a02b0ac 100644
--- a/ShadowEditor.SVG/dist/ShadowEditor.SVG.js
+++ b/ShadowEditor.SVG/dist/ShadowEditor.SVG.js
@@ -398,6 +398,8 @@
 	    return control;
 	};
 
+	const SVG = new Manager();
+
 	/**
 	 * SVG文档
 	 * @author tengge / https://github.com/tengge1
@@ -414,7 +416,7 @@
 	    this.renderDom(this.createElement('svg'));
 	};
 
-	window.SVG.addXType('dom', Dom);
+	SVG.addXType('dom', Dom);
 
 	/**
 	 * SVG圆
@@ -432,7 +434,7 @@
 	    this.renderDom(this.createElement('circle'));
 	};
 
-	window.SVG.addXType('circle', Circle);
+	SVG.addXType('circle', Circle);
 
 	/**
 	 * SVG椭圆
@@ -450,7 +452,7 @@
 	    this.renderDom(this.createElement('ellipse'));
 	};
 
-	window.SVG.addXType('ellipse', Ellipse);
+	SVG.addXType('ellipse', Ellipse);
 
 	/**
 	 * SVG线
@@ -468,7 +470,7 @@
 	    this.renderDom(this.createElement('line'));
 	};
 
-	window.SVG.addXType('line', Line);
+	SVG.addXType('line', Line);
 
 	/**
 	 * SVG面
@@ -486,7 +488,7 @@
 	    this.renderDom(this.createElement('polygon'));
 	};
 
-	window.SVG.addXType('polygon', Polygon);
+	SVG.addXType('polygon', Polygon);
 
 	/**
 	 * SVG曲线
@@ -504,7 +506,7 @@
 	    this.renderDom(this.createElement('polyline'));
 	};
 
-	window.SVG.addXType('polyline', Polyline);
+	SVG.addXType('polyline', Polyline);
 
 	/**
 	 * SVG矩形
@@ -522,7 +524,7 @@
 	    this.renderDom(this.createElement('rect'));
 	};
 
-	window.SVG.addXType('rect', Rect);
+	SVG.addXType('rect', Rect);
 
 	/**
 	 * SVG线
@@ -540,7 +542,7 @@
 	    this.renderDom(this.createElement('path'));
 	};
 
-	window.SVG.addXType('path', Path);
+	SVG.addXType('path', Path);
 
 	/**
 	 * SVG文本
@@ -549,8 +551,6 @@
 	 */
 	function Text(options = {}) {
 	    SvgControl.call(this, options);
-
-	    this.text = options.text || null;
 	}
 
 	Text.prototype = Object.create(SvgControl.prototype);
@@ -560,7 +560,7 @@
 	    this.renderDom(this.createElement('text'));
 	};
 
-	window.SVG.addXType('text', Text);
+	SVG.addXType('text', Text);
 
 	/**
 	 * SVG文本路径
@@ -578,7 +578,7 @@
 	    this.renderDom(this.createElement('textPath'));
 	};
 
-	window.SVG.addXType('textpath', TextPath);
+	SVG.addXType('textpath', TextPath);
 
 	/**
 	 * SVG链接
@@ -596,7 +596,7 @@
 	    this.renderDom(this.createElement('a'));
 	};
 
-	window.SVG.addXType('a', Anchor);
+	SVG.addXType('a', Anchor);
 
 	/**
 	 * SVG定义
@@ -614,7 +614,7 @@
 	    this.renderDom(this.createElement('defs'));
 	};
 
-	window.SVG.addXType('defs', Defs);
+	SVG.addXType('defs', Defs);
 
 	/**
 	 * SVG Use
@@ -632,7 +632,7 @@
 	    this.renderDom(this.createElement('use'));
 	};
 
-	window.SVG.addXType('use', Use);
+	SVG.addXType('use', Use);
 
 	/**
 	 * 线性渐变
@@ -650,7 +650,7 @@
 	    this.renderDom(this.createElement('linearGradient'));
 	};
 
-	window.SVG.addXType('lineargradient', linearGradient);
+	SVG.addXType('lineargradient', linearGradient);
 
 	/**
 	 * SVG线
@@ -668,7 +668,7 @@
 	    this.renderDom(this.createElement('g'));
 	};
 
-	window.SVG.addXType('g', Group);
+	SVG.addXType('g', Group);
 
 	/**
 	 * SVG滤镜
@@ -686,7 +686,7 @@
 	    this.renderDom(this.createElement('filter'));
 	};
 
-	window.SVG.addXType('filter', Filter);
+	SVG.addXType('filter', Filter);
 
 	/**
 	 * SVG高斯滤镜
@@ -704,7 +704,7 @@
 	    this.renderDom(this.createElement('feGaussianBlur'));
 	};
 
-	window.SVG.addXType('fegaussianblur', feGaussianBlur);
+	SVG.addXType('fegaussianblur', feGaussianBlur);
 
 	/**
 	 * SVG偏移滤镜
@@ -722,7 +722,7 @@
 	    this.renderDom(this.createElement('feOffset'));
 	};
 
-	window.SVG.addXType('feoffset', feOffset);
+	SVG.addXType('feoffset', feOffset);
 
 	/**
 	 * SVG融合滤镜
@@ -740,7 +740,7 @@
 	    this.renderDom(this.createElement('feBlend'));
 	};
 
-	window.SVG.addXType('feblend', feBlend);
+	SVG.addXType('feblend', feBlend);
 
 	/**
 	 * SVG融合滤镜
@@ -758,11 +758,9 @@
 	    this.renderDom(this.createElement('feColorMatrix'));
 	};
 
-	window.SVG.addXType('fecolormatrix', feColorMatrix);
+	SVG.addXType('fecolormatrix', feColorMatrix);
 
-	const SVG = new Manager();
-
-	window.SVG = SVG;
+	// dom
 
 	exports.SvgControl = SvgControl;
 	exports.SVG = SVG;
diff --git a/ShadowEditor.SVG/src/Anchor.js b/ShadowEditor.SVG/src/Anchor.js
index deb6301f..41bed567 100644
--- a/ShadowEditor.SVG/src/Anchor.js
+++ b/ShadowEditor.SVG/src/Anchor.js
@@ -1,4 +1,4 @@
-import { SvgControl } from './third_party';
+import { SvgControl, SVG } from './third_party';
 
 /**
  * SVG链接
@@ -16,6 +16,6 @@ Anchor.prototype.render = function () {
     this.renderDom(this.createElement('a'));
 };
 
-window.SVG.addXType('a', Anchor);
+SVG.addXType('a', Anchor);
 
 export default Anchor;
\ No newline at end of file
diff --git a/ShadowEditor.SVG/src/Dom.js b/ShadowEditor.SVG/src/Dom.js
index dc903d12..3ef4419d 100644
--- a/ShadowEditor.SVG/src/Dom.js
+++ b/ShadowEditor.SVG/src/Dom.js
@@ -1,4 +1,4 @@
-import { SvgControl } from './third_party';
+import { SvgControl, SVG } from './third_party';
 
 /**
  * SVG文档
@@ -16,6 +16,6 @@ Dom.prototype.render = function () {
     this.renderDom(this.createElement('svg'));
 };
 
-window.SVG.addXType('dom', Dom);
+SVG.addXType('dom', Dom);
 
 export default Dom;
\ No newline at end of file
diff --git a/ShadowEditor.SVG/src/Group.js b/ShadowEditor.SVG/src/Group.js
index 83f73204..40ffe215 100644
--- a/ShadowEditor.SVG/src/Group.js
+++ b/ShadowEditor.SVG/src/Group.js
@@ -1,4 +1,4 @@
-import { SvgControl } from './third_party';
+import { SvgControl, SVG } from './third_party';
 
 /**
  * SVG线
@@ -16,6 +16,6 @@ Group.prototype.render = function () {
     this.renderDom(this.createElement('g'));
 };
 
-window.SVG.addXType('g', Group);
+SVG.addXType('g', Group);
 
 export default Group;
\ No newline at end of file
diff --git a/ShadowEditor.SVG/src/Path.js b/ShadowEditor.SVG/src/Path.js
index d6d8941c..a08864af 100644
--- a/ShadowEditor.SVG/src/Path.js
+++ b/ShadowEditor.SVG/src/Path.js
@@ -1,4 +1,4 @@
-import { SvgControl } from './third_party';
+import { SvgControl, SVG } from './third_party';
 
 /**
  * SVG线
@@ -16,6 +16,6 @@ Path.prototype.render = function () {
     this.renderDom(this.createElement('path'));
 };
 
-window.SVG.addXType('path', Path);
+SVG.addXType('path', Path);
 
 export default Path;
\ No newline at end of file
diff --git a/ShadowEditor.SVG/src/Text.js b/ShadowEditor.SVG/src/Text.js
index 1bdb8801..ccf07f3c 100644
--- a/ShadowEditor.SVG/src/Text.js
+++ b/ShadowEditor.SVG/src/Text.js
@@ -1,4 +1,4 @@
-import { SvgControl } from './third_party';
+import { SvgControl, SVG } from './third_party';
 
 /**
  * SVG文本
@@ -7,8 +7,6 @@ import { SvgControl } from './third_party';
  */
 function Text(options = {}) {
     SvgControl.call(this, options);
-
-    this.text = options.text || null;
 }
 
 Text.prototype = Object.create(SvgControl.prototype);
@@ -18,6 +16,6 @@ Text.prototype.render = function () {
     this.renderDom(this.createElement('text'));
 };
 
-window.SVG.addXType('text', Text);
+SVG.addXType('text', Text);
 
 export default Text;
\ No newline at end of file
diff --git a/ShadowEditor.SVG/src/TextPath.js b/ShadowEditor.SVG/src/TextPath.js
index 571eb05e..67eebc82 100644
--- a/ShadowEditor.SVG/src/TextPath.js
+++ b/ShadowEditor.SVG/src/TextPath.js
@@ -1,4 +1,4 @@
-import { SvgControl } from './third_party';
+import { SvgControl, SVG } from './third_party';
 
 /**
  * SVG文本路径
@@ -16,6 +16,6 @@ TextPath.prototype.render = function () {
     this.renderDom(this.createElement('textPath'));
 };
 
-window.SVG.addXType('textpath', TextPath);
+SVG.addXType('textpath', TextPath);
 
 export default TextPath;
\ No newline at end of file
diff --git a/ShadowEditor.SVG/src/defs/Defs.js b/ShadowEditor.SVG/src/defs/Defs.js
index a11a0631..664f7d68 100644
--- a/ShadowEditor.SVG/src/defs/Defs.js
+++ b/ShadowEditor.SVG/src/defs/Defs.js
@@ -1,4 +1,4 @@
-import { SvgControl } from '../third_party';
+import { SvgControl, SVG } from '../third_party';
 
 /**
  * SVG定义
@@ -16,6 +16,6 @@ Defs.prototype.render = function () {
     this.renderDom(this.createElement('defs'));
 };
 
-window.SVG.addXType('defs', Defs);
+SVG.addXType('defs', Defs);
 
 export default Defs;
\ No newline at end of file
diff --git a/ShadowEditor.SVG/src/defs/Use.js b/ShadowEditor.SVG/src/defs/Use.js
index e4e2f497..f66dcec8 100644
--- a/ShadowEditor.SVG/src/defs/Use.js
+++ b/ShadowEditor.SVG/src/defs/Use.js
@@ -1,4 +1,4 @@
-import { SvgControl } from '../third_party';
+import { SvgControl, SVG } from '../third_party';
 
 /**
  * SVG Use
@@ -16,6 +16,6 @@ Use.prototype.render = function () {
     this.renderDom(this.createElement('use'));
 };
 
-window.SVG.addXType('use', Use);
+SVG.addXType('use', Use);
 
 export default Use;
\ No newline at end of file
diff --git a/ShadowEditor.SVG/src/defs/linearGradient.js b/ShadowEditor.SVG/src/defs/linearGradient.js
index b4731e9c..041da068 100644
--- a/ShadowEditor.SVG/src/defs/linearGradient.js
+++ b/ShadowEditor.SVG/src/defs/linearGradient.js
@@ -1,4 +1,4 @@
-import { SvgControl } from '../third_party';
+import { SvgControl, SVG } from '../third_party';
 
 /**
  * 线性渐变
@@ -16,6 +16,6 @@ linearGradient.prototype.render = function () {
     this.renderDom(this.createElement('linearGradient'));
 };
 
-window.SVG.addXType('lineargradient', linearGradient);
+SVG.addXType('lineargradient', linearGradient);
 
 export default linearGradient;
\ No newline at end of file
diff --git a/ShadowEditor.SVG/src/filter/Filter.js b/ShadowEditor.SVG/src/filter/Filter.js
index 0337cf00..966cc657 100644
--- a/ShadowEditor.SVG/src/filter/Filter.js
+++ b/ShadowEditor.SVG/src/filter/Filter.js
@@ -1,4 +1,4 @@
-import { SvgControl } from '../third_party';
+import { SvgControl, SVG } from '../third_party';
 
 /**
  * SVG滤镜
@@ -16,6 +16,6 @@ Filter.prototype.render = function () {
     this.renderDom(this.createElement('filter'));
 };
 
-window.SVG.addXType('filter', Filter);
+SVG.addXType('filter', Filter);
 
 export default Filter;
\ No newline at end of file
diff --git a/ShadowEditor.SVG/src/filter/feBlend.js b/ShadowEditor.SVG/src/filter/feBlend.js
index 2f67a9e5..04671433 100644
--- a/ShadowEditor.SVG/src/filter/feBlend.js
+++ b/ShadowEditor.SVG/src/filter/feBlend.js
@@ -1,4 +1,4 @@
-import { SvgControl } from '../third_party';
+import { SvgControl, SVG } from '../third_party';
 
 /**
  * SVG融合滤镜
@@ -16,6 +16,6 @@ feBlend.prototype.render = function () {
     this.renderDom(this.createElement('feBlend'));
 };
 
-window.SVG.addXType('feblend', feBlend);
+SVG.addXType('feblend', feBlend);
 
 export default feBlend;
\ No newline at end of file
diff --git a/ShadowEditor.SVG/src/filter/feColorMatrix.js b/ShadowEditor.SVG/src/filter/feColorMatrix.js
index 74fce8ed..29b23d80 100644
--- a/ShadowEditor.SVG/src/filter/feColorMatrix.js
+++ b/ShadowEditor.SVG/src/filter/feColorMatrix.js
@@ -1,4 +1,4 @@
-import { SvgControl } from '../third_party';
+import { SvgControl, SVG } from '../third_party';
 
 /**
  * SVG融合滤镜
@@ -16,6 +16,6 @@ feColorMatrix.prototype.render = function () {
     this.renderDom(this.createElement('feColorMatrix'));
 };
 
-window.SVG.addXType('fecolormatrix', feColorMatrix);
+SVG.addXType('fecolormatrix', feColorMatrix);
 
 export default feColorMatrix;
\ No newline at end of file
diff --git a/ShadowEditor.SVG/src/filter/feGaussianBlur.js b/ShadowEditor.SVG/src/filter/feGaussianBlur.js
index a0e43114..5714bfa4 100644
--- a/ShadowEditor.SVG/src/filter/feGaussianBlur.js
+++ b/ShadowEditor.SVG/src/filter/feGaussianBlur.js
@@ -1,4 +1,4 @@
-import { SvgControl } from '../third_party';
+import { SvgControl, SVG } from '../third_party';
 
 /**
  * SVG高斯滤镜
@@ -16,6 +16,6 @@ feGaussianBlur.prototype.render = function () {
     this.renderDom(this.createElement('feGaussianBlur'));
 };
 
-window.SVG.addXType('fegaussianblur', feGaussianBlur);
+SVG.addXType('fegaussianblur', feGaussianBlur);
 
 export default feGaussianBlur;
\ No newline at end of file
diff --git a/ShadowEditor.SVG/src/filter/feOffset.js b/ShadowEditor.SVG/src/filter/feOffset.js
index 3433ec66..8fdd5275 100644
--- a/ShadowEditor.SVG/src/filter/feOffset.js
+++ b/ShadowEditor.SVG/src/filter/feOffset.js
@@ -1,4 +1,4 @@
-import { SvgControl } from '../third_party';
+import { SvgControl, SVG } from '../third_party';
 
 /**
  * SVG偏移滤镜
@@ -16,6 +16,6 @@ feOffset.prototype.render = function () {
     this.renderDom(this.createElement('feOffset'));
 };
 
-window.SVG.addXType('feoffset', feOffset);
+SVG.addXType('feoffset', feOffset);
 
 export default feOffset;
\ No newline at end of file
diff --git a/ShadowEditor.SVG/src/index.js b/ShadowEditor.SVG/src/index.js
index 4dc15e87..cf4dd47c 100644
--- a/ShadowEditor.SVG/src/index.js
+++ b/ShadowEditor.SVG/src/index.js
@@ -1,9 +1,3 @@
-import { SvgControl, Manager } from './third_party';
-
-const SVG = new Manager();
-
-window.SVG = SVG;
-
 // dom
 import './Dom';
 
@@ -31,4 +25,4 @@ import './filter/feOffset';
 import './filter/feBlend';
 import './filter/feColorMatrix';
 
-export { SvgControl, SVG };
\ No newline at end of file
+export { SvgControl, SVG } from './third_party';;
\ No newline at end of file
diff --git a/ShadowEditor.SVG/src/shape/Circle.js b/ShadowEditor.SVG/src/shape/Circle.js
index 6559dbb9..7a732298 100644
--- a/ShadowEditor.SVG/src/shape/Circle.js
+++ b/ShadowEditor.SVG/src/shape/Circle.js
@@ -1,4 +1,4 @@
-import { SvgControl } from '../third_party';
+import { SvgControl, SVG } from '../third_party';
 
 /**
  * SVG圆
@@ -16,6 +16,6 @@ Circle.prototype.render = function () {
     this.renderDom(this.createElement('circle'));
 };
 
-window.SVG.addXType('circle', Circle);
+SVG.addXType('circle', Circle);
 
 export default Circle;
\ No newline at end of file
diff --git a/ShadowEditor.SVG/src/shape/Ellipse.js b/ShadowEditor.SVG/src/shape/Ellipse.js
index aabd4208..89a5336a 100644
--- a/ShadowEditor.SVG/src/shape/Ellipse.js
+++ b/ShadowEditor.SVG/src/shape/Ellipse.js
@@ -1,4 +1,4 @@
-import { SvgControl } from '../third_party';
+import { SvgControl, SVG } from '../third_party';
 
 /**
  * SVG椭圆
@@ -16,6 +16,6 @@ Ellipse.prototype.render = function () {
     this.renderDom(this.createElement('ellipse'));
 };
 
-window.SVG.addXType('ellipse', Ellipse);
+SVG.addXType('ellipse', Ellipse);
 
 export default Ellipse;
\ No newline at end of file
diff --git a/ShadowEditor.SVG/src/shape/Line.js b/ShadowEditor.SVG/src/shape/Line.js
index 60cbea41..f318621f 100644
--- a/ShadowEditor.SVG/src/shape/Line.js
+++ b/ShadowEditor.SVG/src/shape/Line.js
@@ -1,4 +1,4 @@
-import { SvgControl } from '../third_party';
+import { SvgControl, SVG } from '../third_party';
 
 /**
  * SVG线
@@ -16,6 +16,6 @@ Line.prototype.render = function () {
     this.renderDom(this.createElement('line'));
 };
 
-window.SVG.addXType('line', Line);
+SVG.addXType('line', Line);
 
 export default Line;
\ No newline at end of file
diff --git a/ShadowEditor.SVG/src/shape/Polygon.js b/ShadowEditor.SVG/src/shape/Polygon.js
index 63309762..dd71c15f 100644
--- a/ShadowEditor.SVG/src/shape/Polygon.js
+++ b/ShadowEditor.SVG/src/shape/Polygon.js
@@ -1,4 +1,4 @@
-import { SvgControl } from '../third_party';
+import { SvgControl, SVG } from '../third_party';
 
 /**
  * SVG面
@@ -16,6 +16,6 @@ Polygon.prototype.render = function () {
     this.renderDom(this.createElement('polygon'));
 };
 
-window.SVG.addXType('polygon', Polygon);
+SVG.addXType('polygon', Polygon);
 
 export default Polygon;
\ No newline at end of file
diff --git a/ShadowEditor.SVG/src/shape/Polyline.js b/ShadowEditor.SVG/src/shape/Polyline.js
index d3a87d5e..c73e307f 100644
--- a/ShadowEditor.SVG/src/shape/Polyline.js
+++ b/ShadowEditor.SVG/src/shape/Polyline.js
@@ -1,4 +1,4 @@
-import { SvgControl } from '../third_party';
+import { SvgControl, SVG } from '../third_party';
 
 /**
  * SVG曲线
@@ -16,6 +16,6 @@ Polyline.prototype.render = function () {
     this.renderDom(this.createElement('polyline'));
 };
 
-window.SVG.addXType('polyline', Polyline);
+SVG.addXType('polyline', Polyline);
 
 export default Polyline;
\ No newline at end of file
diff --git a/ShadowEditor.SVG/src/shape/Rect.js b/ShadowEditor.SVG/src/shape/Rect.js
index 5952a058..eba60fb3 100644
--- a/ShadowEditor.SVG/src/shape/Rect.js
+++ b/ShadowEditor.SVG/src/shape/Rect.js
@@ -1,4 +1,4 @@
-import { SvgControl } from '../third_party';
+import { SvgControl, SVG } from '../third_party';
 
 /**
  * SVG矩形
@@ -16,6 +16,6 @@ Rect.prototype.render = function () {
     this.renderDom(this.createElement('rect'));
 };
 
-window.SVG.addXType('rect', Rect);
+SVG.addXType('rect', Rect);
 
 export default Rect;
\ No newline at end of file
diff --git a/ShadowEditor.SVG/src/third_party.js b/ShadowEditor.SVG/src/third_party.js
index e60aa0c1..d12540f8 100644
--- a/ShadowEditor.SVG/src/third_party.js
+++ b/ShadowEditor.SVG/src/third_party.js
@@ -1 +1,5 @@
-export { SvgControl, Manager } from '@tengge1/xtype.js';
\ No newline at end of file
+import { SvgControl, Manager } from '@tengge1/xtype.js';
+
+const SVG = new Manager();
+
+export { SvgControl, SVG };
\ No newline at end of file
diff --git a/ShadowEditor.SVG/test2/01 SvgDomTest.html b/ShadowEditor.SVG/test/01 SvgDomTest.html
similarity index 78%
rename from ShadowEditor.SVG/test2/01 SvgDomTest.html
rename to ShadowEditor.SVG/test/01 SvgDomTest.html
index 1f807aaa..4edb627c 100644
--- a/ShadowEditor.SVG/test2/01 SvgDomTest.html	
+++ b/ShadowEditor.SVG/test/01 SvgDomTest.html	
@@ -12,20 +12,18 @@
     <script src="../dist/ShadowEditor.SVG.js"></script>
     <script>
         function CustomControl(options = {}) {
-            Shadow.Control.call(this, options);
+            Shadow.SvgControl.call(this, options);
         }
 
-        CustomControl.prototype = Object.create(Shadow.Control.prototype);
+        CustomControl.prototype = Object.create(Shadow.SvgControl.prototype);
         CustomControl.prototype.constructor = CustomControl;
 
         CustomControl.prototype.render = function () {
-            var dom = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-            this.renderDom(dom);
+            this.renderDom(this.createElement('circle'));
         };
 
-        var dom = UI.create({
-            xtype: 'svgdom',
-            id: 'dom1',
+        var dom = Shadow.SVG.create({
+            xtype: 'dom',
             parent: document.body,
             attr: {
                 width: 800,
diff --git a/ShadowEditor.SVG/test/02 SvgCircleTest.html b/ShadowEditor.SVG/test/02 SvgCircleTest.html
new file mode 100644
index 00000000..26c8d7d5
--- /dev/null
+++ b/ShadowEditor.SVG/test/02 SvgCircleTest.html	
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+
+<html lang="zh-cn">
+
+<head>
+    <meta charset="utf-8">
+    <title>02 SvgCircleTest</title>
+    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+</head>
+
+<body>
+    <script src="../dist/ShadowEditor.SVG.js"></script>
+    <script>
+        var dom = Shadow.SVG.create({
+            xtype: 'dom',
+            parent: document.body,
+            attr: {
+                width: 800,
+                height: 600,
+            },
+            children: [{
+                xtype: 'circle',
+                attr: {
+                    cx: 80,
+                    cy: 80,
+                    r: 50,
+                    stroke: '#555',
+                    'stroke-width': 2,
+                    fill: '#f00'
+                },
+                listeners: {
+                    click: () => {
+                        alert('You clicked!');
+                    }
+                }
+            }]
+        });
+
+        dom.render();
+    </script>
+</body>
+
+</html>
\ No newline at end of file