Add support for deprecated camelCase'd SVG props. Fixes #222.

Author: developit

src/index.js

@@ -22,6 +22,9 @@ const AUTOBIND_BLACKLIST = {
 };
 
 
+const CAMEL_PROPS = /^(accent|alignment|arabic|baseline|cap|clip|color|fill|flood|font|glyph|horiz|marker|overline|paint|stop|strikethrough|stroke|text|underline|unicode|units|v|vert|word|writing|x)[A-Z]/g;
+
+
 const BYPASS_HOOK = {};
 
 /*global process*/
@@ -96,6 +99,15 @@ function handleVNode(vnode) {
 
 		if (vnode.children) a.children = vnode.children;
 	}
+	else if (a) {
+		for (let i in a) {
+			if (a.hasOwnProperty(i) && i.match(CAMEL_PROPS)) {
+				a[i.replace(/([A-Z0-9])/g, '-$1').toLowerCase()] = a[i];
+				delete a[i];
+			}
+		}
+	}
+}
 
 
 

test/svg.js

@@ -39,4 +39,14 @@ describe('svg', () => {
 
 		expect(scratch.innerHTML).to.equal('<svg viewBox="0 0 360 360"><path stroke="white" fill="black" d="M347.1 357.9L183.3 256.5 13 357.9V1.7h334.1v356.2zM58.5 47.2v231.4l124.8-74.1 118.3 72.8V47.2H58.5z"></path></svg>');
 	});
+
+	it('should render SVG to DOM', () => {
+		React.render((
+			<svg viewBox="0 0 100 100">
+				<text textAnchor="mid">foo</text>
+			</svg>
+		), scratch);
+
+		expect(scratch.innerHTML).to.equal('<svg viewBox="0 0 100 100"><text text-anchor="mid">foo</text></svg>');
+	});
 });