Better SVG Support for namespaced attributes

[ledbruno]

We are trying to use React for a SVG document. But we are facing problems for namespaced attributes.

For instance, this element cant be constructed with React:

<image xlink:href="firefox.jpg" x="0" y="0" height="50px" width="50px"/>

We cant build a JSX for a xmlns:xlink attribute. Is there any way to solve this?

[ledbruno]

The exception that is raised, when we try to put some namespaced attributes:
"Error: Namespace attributes are not supported. ReactJSX is not XML."

[edmspjp]

I already faced the same issue for image element. I opened an issue and
meanwhile I'm using the following:

<svg dangerouslySetInnerHTML={

{__html:

"<image id=" + this.props.id + " x=" + this.props.x + " y=" +
this.props.y +

" width='"+ (this.props.width-20) +"' height='"+
(this.props.height-(this.props.text!=='none'?40:20)) +

"' fill='#90' stroke='#000' style='cursor:pointer' xlink:href='" +
this.props.image +

"'/>"

}

}/>

2014-09-28 15:20 GMT+01:00 Bruno Ledesma notifications@github.com:

The exception that is raised, when we try to put some namespaced
attributes:
"Error: Namespace attributes are not supported. ReactJSX is not XML."

—
Reply to this email directly or view it on GitHub
#2250 (comment).

Paulo Jorge Dias
: à procura do erro certo
: looking for the right error

[bobby]

+1 on this. React could be a really great platform for doing SVG, but it's hard to use SVG to full effect without xlink:href and friends.

[dujuanxian]

Hi @edmspjp I had the same issue, but it seems add dangerouslySetInnerHTML to tag still has the same problem. And take the whole svg tag as dangerouslySetInnerHTML attr to its parent tag works for me. I am not sure if you met the problem before.

var svgTag='<svg><image..></svg>';

<div dangerouslySetInnerHTML={__html: svgTag} />

[lennerd]

Any updates on or further plans for supporting SVG namespaced elements and attributes?

[willhackett]

Seems it's still necessary to implement SVGs using dangerouslySetInnerHTML.

[lennerd]

I can recommend to use a combination of d3 and react. When ever I need to use namespaced attributes I use d3 in the componentDidMount method.

+1 for this request. I need React to render an inline SVG that has an image inside a clipping path, and it's getting hung on the xmlns:xlink="http://www.w3.org/1999/xlink" attr in the <svg> tag.

@dujuanxian's workaround helped me get through this, provided double (not single) braces are used, of course:

var svgString = '<svg /* React-unfriendly code here... */ </svg>';
<div dangerouslySetInnerHTML={{ __html: svgString }} />

[lennerd]

Just to show an example using d3 for the non-react-svg-stuff:

https://github.com/FH-Potsdam/shifted-maps/blob/master/app/client/components/place-map.js#L21-L40

I used d3 here, because React is not able to set href attribute of image tags.

[Nukesor]

+1 Any updates on this? Thx for the workaround. Hope it'll work until this is fixed.