1 files changed, 24 insertions, 13 deletions
diff --git a/src/rx.ts b/src/rx.ts
index 4d0101e..48db4fd 100644
--- a/src/rx.ts
+++ b/src/rx.ts
@@ -470,12 +470,22 @@ function appendChild(state: State, element: Element, child: Html, lastAdded?: No
   } else if (isTag(child)) {
     const { tagName, attributes, children, onmount, onunmount } = child
 
-    const childElement = document.createElement(tagName)
+    const s = isSvg(tagName)
+
+    const childElement = s
+        ? document.createElementNS('http://www.w3.org/2000/svg', tagName)
+        : document.createElement(tagName)
+
+    const setAttr = s
+        ? (key: any, value: any) => childElement.setAttribute(key, value)
+        // @ts-ignore
+        : (key: any, value: any) => childElement[key] = value
+
     const cancelAttributes = Object.entries(attributes).map(([key, value]) => {
       if (isRx<AttributeValue>(value)) {
-        return rxRun(state, value, newValue => setAttribute(state, childElement, key, newValue))
+        return rxRun(state, value, newValue => setAttribute(state, setAttr, element, key, newValue))
       } else {
-        setAttribute(state, childElement, key, value)
+        setAttribute(state, setAttr, element, key, value)
       }
     })
 
@@ -647,6 +657,11 @@ function appendChild(state: State, element: Element, child: Html, lastAdded?: No
   }
 }
 
+const svgElements = ['svg', 'circle', 'polygon', 'line', 'rect', 'ellipse', 'text']
+function isSvg(tagName: string): boolean {
+    return !(svgElements.indexOf(tagName) === -1)
+}
+
 function isTag<A>(x: any): x is Tag {
   return x !== undefined && x.type === "Tag"
 }
@@ -683,26 +698,22 @@ function appendNode(base: Element, node: Node, lastAdded?: Node) {
   }
 }
 
-function setAttribute(state: State, element: Element, key: string, attribute: AttributeValue) {
+function setAttribute(state: State, setAttr: (key: any, value: any) => void, element: Element, key: string, attribute: AttributeValue) {
   if (attribute === undefined) {
     // Do nothing
   } else if (attribute === true) {
-    // @ts-ignore
-    element[key] = 'true'
+    setAttr(key, 'true')
   } else if (attribute === false) {
     // @ts-ignore
     if (key in element) {
-      // @ts-ignore
-      element[key] = false
+      setAttr(key, false)
     }
   } else if (typeof attribute === "number") {
-    // @ts-ignore
-    element[key] = attribute.toString()
+    setAttr(key, attribute.toString())
   } else if (typeof attribute === "string") {
-    // @ts-ignore
-    element[key] = attribute
+    setAttr(key, attribute)
   } else {
     // @ts-ignore
-    element[key] = (event: Event) => attribute(event)
+    setAttr(key, (event: Event) => attribute(event))
   }
 }