Browse Source

fix svg foreignObject regression (fix #4478)

dev
Evan You 8 years ago
parent
commit
6116bbf13a
  1. 5
      src/core/vdom/create-element.js
  2. 3
      src/platforms/web/util/element.js
  3. 9
      test/unit/modules/vdom/create-element.spec.js

5
src/core/vdom/create-element.js

@ -71,7 +71,6 @@ export function _createElement (
// unknown or unlisted namespaced elements // unknown or unlisted namespaced elements
// check at runtime because it may get assigned a namespace when its // check at runtime because it may get assigned a namespace when its
// parent normalizes children // parent normalizes children
ns = tag === 'foreignObject' ? 'xhtml' : ns
vnode = new VNode( vnode = new VNode(
tag, data, children, tag, data, children,
undefined, undefined, context undefined, undefined, context
@ -91,6 +90,10 @@ export function _createElement (
function applyNS (vnode, ns) { function applyNS (vnode, ns) {
vnode.ns = ns vnode.ns = ns
if (vnode.tag === 'foreignObject') {
// use default namespace inside foreignObject
return
}
if (vnode.children) { if (vnode.children) {
for (let i = 0, l = vnode.children.length; i < l; i++) { for (let i = 0, l = vnode.children.length; i < l; i++) {
const child = vnode.children[i] const child = vnode.children[i]

3
src/platforms/web/util/element.js

@ -5,8 +5,7 @@ import { makeMap } from 'shared/util'
export const namespaceMap = { export const namespaceMap = {
svg: 'http://www.w3.org/2000/svg', svg: 'http://www.w3.org/2000/svg',
math: 'http://www.w3.org/1998/Math/MathML', math: 'http://www.w3.org/1998/Math/MathML'
xhtml: 'http://www.w3.org/1999/xhtml'
} }
export const isHTMLTag = makeMap( export const isHTMLTag = makeMap(

9
test/unit/modules/vdom/create-element.spec.js

@ -132,6 +132,15 @@ describe('create-element', () => {
expect(vnode.children[0].componentOptions).toBeUndefined() expect(vnode.children[0].componentOptions).toBeUndefined()
}) })
it('render svg foreignObject with correct namespace', () => {
const vm = new Vue({})
const h = vm.$createElement
const vnode = h('svg', [h('foreignObject', [h('p')])])
expect(vnode.ns).toBe('svg')
expect(vnode.children[0].ns).toBe('svg')
expect(vnode.children[0].children[0].ns).toBeUndefined()
})
it('warn observed data objects', () => { it('warn observed data objects', () => {
new Vue({ new Vue({
data: { data: {

Loading…
Cancel
Save