Attach Events To 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. The onClick event is included as an attribute value when the React element is created. Click on an element to change its fill color.


React Root SVG Source:

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