diff --git a/src/create-element.ts b/src/create-element.ts index 7d0bd266..1c23a472 100644 --- 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 index cbb80008..b5786065 100644 --- 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 index eb8bd37f..9df74dc5 100644 --- 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) => {