Lukáš Unzeitig Lukáš Unzeitig - 3 months ago 18
HTML Question

React - html tags inside svg

i am making circle menu, so i use svg to create a circle, and now i want to render inside of part of circle Link with some image. How i can do it ? My 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 something like this -

<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 it doesnt work, this foreign object have still 0 widh and 0 height and content doesnt show.

UPDATE

I need to assign Link component to all 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>

Joy Joy
Answer

Please check it here JSFiddle. Use image element to add the image to 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 you do not set the x or y attributes, they will be set to 0.

If you do not set the height or width attributes, they will be set to 0.

Having a height or width attribute of 0 will disable rendering of the image.


Update 1

Here is a working example to add a React component together with the image: JSFiddle. But I make the Link component as a sibling of the SVG, and then using absolute to position them. Not a perfect solution.


Update 2

To make a path clickable: JSFiddle.


Update 3

This is an image with clickable paths, integrated with 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>
  }
});