reactjs - React - html tags inside svg -

i making circle menu, use svg create circle, , want show link image inside of part of circle. how can it? code -

render(){     return(        <svg id={"menulevel" + index} width={200} height={200}>           <path fill="white" stroke="rgba(0,0,0,0.2)" strokewidth="2" d={"m"+width+","+width+" l"+previousx+", "+previousy+" a"+width+","+width+" 0 0,0 "+x+", "+y+" z"}></path>       </svg>     ) } 

i tried -

<path fill="white" stroke="rgba(0,0,0,0.2)" strokewidth="2" d={"m"+width+","+width+" l"+previousx+", "+previousy+" a"+width+","+width+" 0 0,0 "+x+", "+y+" z"}>      <foreignobject x="120" y="120" width="180" height="180">          <link ...><image .../></link>      </foreignobject> </path> 

but doesn't work, foreign object have still 0 width , 0 height , content doesn't show.

update

i need assign link component path objects

<svg id={"menulevel" + index} width={width*2+2} height={width*2+2}>                     {arr.map(function(item){                         let angleinradians = -item * math.pi / 180.0;                         let previousx =  x;                         let previousy = y;                         x = width + width * math.cos(angleinradians);                         y = width + width * math.sin(angleinradians);                         return(                                 <path fill="white" stroke="rgba(0,0,0,0.2)" strokewidth="2" d={"m"+width+","+width+" l"+previousx+", "+previousy+" a"+width+","+width+" 0 0,0 "+x+", "+y+" z"}>                                 </path>                         )                     })}                 </svg>  

please check here jsfiddle. use image element add image svg: https://developer.mozilla.org/en-us/docs/web/svg/tutorial/svg_image_tag

<svg width="5cm" height="4cm" version="1.1"      xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">      <circle x="0" y="0" r="200"></circle>     <image xlink:href="https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" x="0" y="0" height="200px" width="200px"/> </svg> 

please note:

if not set x or y attributes, set 0.

if not set height or width attributes, set 0.

having height or width attribute of 0 disable rendering of image.

---

update 1

here working example add react component image: jsfiddle. make link component sibling of svg, , using absolute position them. not perfect solution.

---

update 2

to make path clickable: jsfiddle.

---

update 3

this image clickable paths, integrated reactjs: jsfiddle:

var link = react.createclass({   render: function() {     return <a classname="link" href={this.props.href} target="_blank">{this.props.children}</a>   } });  var hello = react.createclass({    render: function() {     return <div id="container"><svg xmlns="http://www.w3.org/2000/svg" width="300px" height="300px">      <link href="http://www.google.com">       <g transform="translate(100, 100)"><image href="https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" x="0" y="0" height="200px" width="200px"/></g>      </link>      <link href="http://www.facebook.com">      <g><image href="https://www.facebook.com/images/fb_icon_325x325.png" x="0" y="0" height="100px" width="100px"/></g>      </link> </svg></div>   } });