fix:svg support check

NervJS · Oct 17, 2017 · b70b925 · b70b925
1 parent da3e4a6
commit b70b925
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 7 deletions.
diff --git a/src/create-element.ts b/src/create-element.ts
@@ -1,6 +1,6 @@
 import h from './vdom/h'
 import SVGPropertyConfig from './vdom/svg-property-config'
-import { isFunction, isString, isNumber, isBoolean, isObject } from './util'
+import { isFunction, isString, isNumber, isBoolean, isObject, supportSVG } from './util'
 import FullComponent from './full-component'
 import StatelessComponent from './stateless-component'
 import CurrentOwner from './current-owner'
@@ -15,6 +15,7 @@ import VNode from './vdom/vnode/vnode'
 const IS_NON_DIMENSIONAL = /acit|ex(?:s|g|n|p|$)|rph|ows|mnc|ntw|ine[ch]|zoo|^ord/i
 
 const EMPTY_CHILDREN = []
+const isSupportSVG = supportSVG()
 
 function transformPropsForRealTag (tagName: string, props: IProps) {
   const newProps: any = {}
@@ -42,7 +43,7 @@ function transformPropsForRealTag (tagName: string, props: IProps) {
       newProps[propName] = !(propValue instanceof EventHook) ? new EventHook(propName, propValue) : propValue
       continue
     }
-    if (DOMAttributeNamespaces.hasOwnProperty(originalPropName) &&
+    if (isSupportSVG && DOMAttributeNamespaces.hasOwnProperty(originalPropName) &&
       (isString(propValue) || isNumber(propValue) || isBoolean(propValue))) {
       const namespace = DOMAttributeNamespaces[originalPropName]
       newProps[propName] = !((propValue as any) instanceof AttributeHook)

diff --git a/src/util/index.ts b/src/util/index.ts
@@ -61,3 +61,11 @@ export function isEmptyObject (obj) {
   }
   return true
 }
+
+export const supportSVG = (() => {
+  const SVG_NS = 'http://www.w3.org/2000/svg'
+  const doc = document
+  return () => {
+    return !!doc.createElementNS && !!doc.createElementNS(SVG_NS, 'svg').createSVGRect
+  }
+})()
diff --git a/src/vdom/create-element.ts b/src/vdom/create-element.ts
@@ -1,11 +1,12 @@
 import { isVNode, isVText, isWidget, isHook } from './vnode/types'
-import { isObject, isString, isNumber, isFunction } from '../util'
+import { isObject, isString, isNumber, isFunction, supportSVG } from '../util'
 import { VirtualNode, IProps } from '../types'
 import options from '../options'
 
 const SVG_NAMESPACE = 'http://www.w3.org/2000/svg'
 
 const doc = document
+const isSupportSVG = supportSVG()
 function createElement (vnode: VirtualNode, isSvg?: boolean): Element | Text | Comment | DocumentFragment | null {
   if (isWidget(vnode)) {
     return vnode.init()
@@ -27,18 +28,19 @@ function createElement (vnode: VirtualNode, isSvg?: boolean): Element | Text | C
     } else if (vnode.tagName === 'foreignObject') {
       isSvg = false
     }
+    if (!isSupportSVG) {
+      isSvg = false
+    }
     if (isSvg) {
       vnode.namespace = SVG_NAMESPACE
+      vnode.isSvg = isSvg
     }
     const domNode = (vnode.namespace === null) ? doc.createElement(vnode.tagName)
-      : doc.createElementNS ? doc.createElementNS(vnode.namespace, vnode.tagName) : doc.createElement(vnode.tagName)
+      : isSupportSVG ? doc.createElementNS(vnode.namespace, vnode.tagName) : doc.createElement(vnode.tagName)
     setProps(domNode, vnode.props, isSvg)
     if (options.debug) { // for devtools
       (domNode as any)._props = vnode.props
     }
-    if (isSvg) {
-      vnode.isSvg = isSvg
-    }
     const children = vnode.children
     if (children.length) {
       children.forEach((child) => {