Dynamically Insert SVG Elements

This example dynamically builds and renders an array of rects, circles, plus ellipses. It uses React.createClass to build an object (<SVGElems />) holding all elements. Note: Each element must have a unique key; e.g. key={myKey}


React Root SVG Source:

Babel Script (code):
  1. var randColor = function() //---create random colors---
  2.     {
  3.         return '#'+Math.floor(Math.random()*16777215).toString(16);
  4.     }
  5.  
  6.     //---create a React svg root element---
  7.     const svgRoot=ReactDOM.render(<svg id="mySVG" overflow="visible" xmlns="http://www.w3.org/2000/svg" />, svgDiv);
  8.  
  9.     //---create a React rect, circle, and ellipse SVG template element with properties (i.e. svg typical attributes)---
  10.     var rect = (props) => React.createElement("rect",{x:props.x, y:props.y, width:props.width, height:props.height, fill:props.fill}) //---ES6 arrow function---
  11.     var circle = (props) => React.createElement("circle",{cx:props.cx, cy:props.cy, r:props.r,  fill:props.fill}) //---ES6 arrow function---
  12.     var ellipse = (props) => React.createElement("ellipse",{cx:props.cx, cy:props.cy, rx:props.rx, ry:props.ry, fill:props.fill}) //---ES6 arrow function---
  13.  
  14.     //---dynamically build an array of elements---
  15.     var svgElems=[]
  16.     for(var k=0;k<6;k++)  //---provide a key value for each element---
  17.     {
  18.         svgElems.push(<rect className="rect-svg" key={"rect"+k} x={100*k} y={0} width={100} height={100} fill={randColor()} />)
  19.         svgElems.push(<circle className="circle-svg" key={"circle"+k} cx={125*k} cy={180} r={50}  fill={randColor()} />)
  20.         svgElems.push(<ellipse className="ellipse-svg" key={"ellipse"+k} cx={100*k} cy={280} rx={50} ry={30} fill={randColor()} />)
  21.     }
  22.  
  23.     //---object holding all elements---
  24.     var SVGElems = React.createClass({
  25.         render: function()
  26.         {
  27.            return  <g>{ svgElems }</g>  //---encapsulate in <g> element---
  28.         }
  29.     });
  30.  
  31.     ReactDOM.render(<SVGElems />, mySVG);
  32.  
  33.     //---local function to show svg source on page: React Root SVG Source---
  34.     showSourceSVG()
  35.