Merge pull request #13 from wildlyinaccurate/render-svg-tags

SVG XLink attributes are rendered incorrectly

Author: developit

src/index.js

@@ -49,7 +49,7 @@ let shallowRender = (vnode, context) => renderToString(vnode, context, SHALLOW);
 
 
 /** The default export is an alias of `render()`. */
-export default function renderToString(vnode, context, opts, inner) {
+export default function renderToString(vnode, context, opts, inner, isSvgMode) {
 	let { nodeName, attributes, children } = vnode || EMPTY,
 		isComponent = false;
 	context = context || {};
@@ -117,6 +117,9 @@ export default function renderToString(vnode, context, opts, inner) {
 				if (attributes['class']) continue;
 				name = 'class';
 			}
+			else if (isSvgMode && name.match(/^xlink\:?(.+)/)) {
+				name = name.toLowerCase().replace(/^xlink\:?(.+)/, 'xlink:$1')
+			}
 
 			if (name==='class' && v && typeof v==='object') {
 				v = hashToClassName(v);
@@ -169,7 +172,8 @@ export default function renderToString(vnode, context, opts, inner) {
 		for (let i=0; i<len; i++) {
 			let child = children[i];
 			if (!falsey(child)) {
-				let ret = renderToString(child, context, opts, true);
+				let childSvgMode = nodeName==='svg' ? true : nodeName==='foreignObject' ? false : isSvgMode,
+					ret = renderToString(child, context, opts, true, childSvgMode);
 				if (!hasLarge && pretty && isLargeString(ret)) hasLarge = true;
 				pieces.push(ret);
 			}

test/render.js

@@ -71,6 +71,22 @@ describe('render', () => {
 
 			expect(rendered).to.equal(expected);
 		});
+
+		it('should render SVG elements', () => {
+			let rendered = render((
+				<svg>
+					<image xlinkHref="#" />
+					<foreignObject>
+						<div xlinkHref="#" />
+					</foreignObject>
+					<g>
+						<image xlinkHref="#" />
+					</g>
+				</svg>
+			));
+
+			expect(rendered).to.equal(`<svg><image xlink:href="#"></image><foreignObject><div xlinkHref="#"></div></foreignObject><g><image xlink:href="#"></image></g></svg>`);
+		});
 	});
 
 	describe('Functional Components', () => {