textPath Is Not Defined

[epihel]

Using react-templates 0.6.1 and react 15.5.4, the following code renders without errors:

render() { return ( <svg> <text> <textPath>txt</textPath> </text> </svg> ); };

But this SVG in an .rt file:
<text> <textPath>txt</textPath> </text>

compiles to:
React.createElement('text', {}, React.createElement(textPath, {}, 'txt'))

and produces the error "Uncaught ReferenceError: textPath is not defined." It looks like there should be quotes around "textPath."

According to React's documentation (https://facebook.github.io/react/blog/2016/04/07/react-v15.html), SVG elements are now fully supported. Is there a way to include textPath in rt files?

[nippur72]

this could be quickly fixed by adding textPath to the list of SVG elements here.

As a workaround, until someone submits a PR, you could cheat by defining the variable textPath and let react render it as a native element:

let textPath = 'textPath';
...
<textPath></textPath>

or even in a scope:

<div rt-scope="'textPath' as textPath">
...
   <textPath></textPath>
...
</div>

[epihel]

Thank you for the rt-scope workaround. That worked. This then revealed a few more issues with the SVG attributes "xlink:href" and "clip-path," as well as the style attribute "clip-path", which react-templates currently passes through unchanged:

<path d="M 73,300 L 90,310" style="clip-path: url('url')"></path>

React gives the warnings:
"Unknown DOM property xlink:href. Did you mean xlinkHref?"
"Unknown DOM property clip-path. Did you mean clipPath?"