diff --git a/ShadowEditor.SVG/dist/ShadowEditor.SVG.js b/ShadowEditor.SVG/dist/ShadowEditor.SVG.js
index ec663466..b87617b9 100644
--- a/ShadowEditor.SVG/dist/ShadowEditor.SVG.js
+++ b/ShadowEditor.SVG/dist/ShadowEditor.SVG.js
@@ -354,6 +354,38 @@
 	    this.parent.appendChild(this.dom);
 	};
 
+	/**
+	 * SVG面
+	 * @author tengge / https://github.com/tengge1
+	 * @param {*} options 
+	 */
+	function SvgPolygon(options = {}) {
+	    SvgControl.call(this, options);
+	}
+
+	SvgPolygon.prototype = Object.create(SvgControl.prototype);
+	SvgPolygon.prototype.constructor = SvgPolygon;
+
+	SvgPolygon.prototype.render = function () {
+	    this.dom = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
+
+	    if (this.attr) {
+	        Object.keys(this.attr).forEach(n => {
+	            this.dom.setAttribute(n, this.attr[n]);
+	        });
+	    }
+
+	    if (this.style) {
+	        Object.assign(this.dom.style, this.style);
+	    }
+
+	    if (this.listeners) {
+	        Object.assign(this.dom, this.listeners);
+	    }
+
+	    this.parent.appendChild(this.dom);
+	};
+
 	/**
 	 * SVG类
 	 * @author tengge / https://github.com/tengge1
@@ -482,6 +514,7 @@
 	    SvgEllipse: SvgEllipse,
 	    SvgLine: SvgLine,
 	    SvgPolyline: SvgPolyline,
+	    SvgPolygon: SvgPolygon,
 	});
 
 	// 添加所有SVG控件的XType
@@ -493,6 +526,7 @@
 	SVG$1.addXType('svgellipse', SvgEllipse);
 	SVG$1.addXType('svgline', SvgLine);
 	SVG$1.addXType('svgpolyline', SvgPolyline);
+	SVG$1.addXType('svgpolygon', SvgPolygon);
 
 	window.SVG = SVG$1;
 
diff --git a/ShadowEditor.SVG/src/SVG.js b/ShadowEditor.SVG/src/SVG.js
index a7f54dc5..4de15683 100644
--- a/ShadowEditor.SVG/src/SVG.js
+++ b/ShadowEditor.SVG/src/SVG.js
@@ -6,6 +6,7 @@ import SvgRect from './SvgRect';
 import SvgEllipse from './SvgEllipse';
 import SvgLine from './SvgLine';
 import SvgPolyline from './SvgPolyline';
+import SvgPolygon from './SvgPolygon';
 
 /**
  * SVG类
@@ -135,6 +136,7 @@ Object.assign(SVG, {
     SvgEllipse: SvgEllipse,
     SvgLine: SvgLine,
     SvgPolyline: SvgPolyline,
+    SvgPolygon: SvgPolygon,
 });
 
 // 添加所有SVG控件的XType
@@ -146,6 +148,7 @@ SVG.addXType('svgrect', SvgRect);
 SVG.addXType('svgellipse', SvgEllipse);
 SVG.addXType('svgline', SvgLine);
 SVG.addXType('svgpolyline', SvgPolyline);
+SVG.addXType('svgpolygon', SvgPolygon);
 
 window.SVG = SVG;
 
diff --git a/ShadowEditor.SVG/src/SvgPolygon.js b/ShadowEditor.SVG/src/SvgPolygon.js
new file mode 100644
index 00000000..2e77a9e3
--- /dev/null
+++ b/ShadowEditor.SVG/src/SvgPolygon.js
@@ -0,0 +1,35 @@
+import SvgControl from './SvgControl';
+
+/**
+ * SVG面
+ * @author tengge / https://github.com/tengge1
+ * @param {*} options 
+ */
+function SvgPolygon(options = {}) {
+    SvgControl.call(this, options);
+}
+
+SvgPolygon.prototype = Object.create(SvgControl.prototype);
+SvgPolygon.prototype.constructor = SvgPolygon;
+
+SvgPolygon.prototype.render = function () {
+    this.dom = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
+
+    if (this.attr) {
+        Object.keys(this.attr).forEach(n => {
+            this.dom.setAttribute(n, this.attr[n]);
+        });
+    }
+
+    if (this.style) {
+        Object.assign(this.dom.style, this.style);
+    }
+
+    if (this.listeners) {
+        Object.assign(this.dom, this.listeners);
+    }
+
+    this.parent.appendChild(this.dom);
+};
+
+export default SvgPolygon;
\ No newline at end of file
diff --git a/ShadowEditor.SVG/src/svg/element/SvgPolygon.js b/ShadowEditor.SVG/src/svg/element/SvgPolygon.js
deleted file mode 100644
index 9909db3a..00000000
--- a/ShadowEditor.SVG/src/svg/element/SvgPolygon.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { SvgElement } from './SvgElement';
-
-/**
- * @author tengge / https://github.com/tengge1
- */
-
-function SvgPolygon(options) {
-    SvgElement.call(this, options);
-    options = options || {};
-    this.points = options.points || '0,0,100,0,100,100,0,100';
-    this.stroke = options.stroke || 'red';
-    this.strokeWidth = options.strokeWidth || 2;
-    this.fill = options.fill || 'yellow';
-}
-
-SvgPolygon.prototype = Object.create(SvgElement.prototype);
-SvgPolygon.prototype.constructor = SvgPolygon;
-
-SvgPolygon.prototype.render = function() {
-    this.parent.append('polygon')
-        .attr('points', this.points)
-        .call(this.renderStyle, this);
-};
-
-export { SvgPolygon };
\ No newline at end of file
diff --git a/ShadowEditor.SVG/src/svg/element/SvgPolyline.js b/ShadowEditor.SVG/src/svg/element/SvgPolyline.js
deleted file mode 100644
index d76263b0..00000000
--- a/ShadowEditor.SVG/src/svg/element/SvgPolyline.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { SvgElement } from './SvgElement';
-
-/**
- * @author tengge / https://github.com/tengge1
- */
-
-function SvgPolyline(options) {
-    SvgElement.call(this, options);
-    options = options || {};
-    this.points = options.points || '0,0,100,100,150,100,150,150';
-    this.stroke = options.stroke === undefined ? 'red' : options.stroke;
-    this.strokeWidth = options.strokeWidth || 2;
-    this.fill = options.fill || 'none';
-}
-
-SvgPolyline.prototype = Object.create(SvgElement.prototype);
-SvgPolyline.prototype.constructor = SvgPolyline;
-
-SvgPolyline.prototype.render = function() {
-    this.parent.append('polyline')
-        .attr('points', this.points)
-        .call(this.renderStyle, this);
-};
-
-export { SvgPolyline };
\ No newline at end of file
diff --git a/ShadowEditor.SVG/test/07 SvgPolygonTest.html b/ShadowEditor.SVG/test/07 SvgPolygonTest.html
new file mode 100644
index 00000000..43449e3d
--- /dev/null
+++ b/ShadowEditor.SVG/test/07 SvgPolygonTest.html	
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+
+<html lang="zh-cn">
+
+<head>
+    <meta charset="utf-8">
+    <title>07 SvgPolygonTest</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 svg = SVG.create({
+            xtype: 'svgdom',
+            id: 'svg1',
+            parent: document.body,
+            attr: {
+                width: 800,
+                height: 600,
+            },
+            children: [{
+                xtype: 'svgpolygon',
+                attr: {
+                    points: [0, 0, 10, 30, 40, 60, 200, 100],
+                    stroke: '#f00',
+                    'stroke-width': 2,
+                    fill: '#f00'
+                },
+                listeners: {
+                    onclick: () => {
+                        alert('You clicked!');
+                    }
+                }
+            }]
+        });
+        svg.render();
+    </script>
+</body>
+
+</html>
\ No newline at end of file