Merge pull request #1391 from developit/svg_foreign_object

Fix foreignObject not being treated as svg
preactjs · Mar 11, 2019 · dc2e810 · dc2e810
2 parents 5046b75 + 06fffd0
commit dc2e810
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/src/diff/index.js b/src/diff/index.js
@@ -217,7 +217,7 @@ function diffElementNodes(dom, newVNode, oldVNode, context, isSvg, excessDomChil
 	let d = dom;
 
 	// Tracks entering and exiting SVG namespace when descending through the tree.
-	isSvg = isSvg ? newVNode.type !== 'foreignObject' : newVNode.type === 'svg';
+	isSvg = newVNode.type==='svg' || isSvg;
 
 	if (dom==null && excessDomChildren!=null) {
 		for (let i=0; i<excessDomChildren.length; i++) {
@@ -261,7 +261,7 @@ function diffElementNodes(dom, newVNode, oldVNode, context, isSvg, excessDomChil
 			diffProps(dom, newVNode.props, oldProps, isSvg);
 		}
 
-		diffChildren(dom, newVNode, oldVNode, context, isSvg, excessDomChildren, mounts, ancestorComponent);
+		diffChildren(dom, newVNode, oldVNode, context, newVNode.type==='foreignObject' ? false : isSvg, excessDomChildren, mounts, ancestorComponent);
 	}
 
 	return dom;

diff --git a/test/browser/svg.test.js b/test/browser/svg.test.js
@@ -118,6 +118,20 @@ describe('svg', () => {
 			.that.is.a('HTMLAnchorElement');
 	});
 
+	it('should render foreignObject as an svg element', () => {
+		render((
+			<svg>
+				<g>
+					<foreignObject>
+						<a href="#foo">test</a>
+					</foreignObject>
+				</g>
+			</svg>
+		), scratch);
+
+		expect(scratch.querySelector('foreignObject').localName).to.equal('foreignObject');
+	});
+
 	it('should transition from DOM to SVG and back', () => {
 		render((
 			<div>