SVG Hello World

React creates the SVG root. Then it creates a text element and renders it inside the SVG root. Note: All attribute values are contained within { }. The values can be a string, number, argument, or function.


React Root SVG Source:

Babel Script (code):
  1. const svgRoot=ReactDOM.render(<svg className="svg-root" id="mySVG" overflow="visible" xmlns="http://www.w3.org/2000/svg" />, svgDiv);
  2.  
  3. ReactDOM.render
  4. (
  5.     <text className="svg-text" x={50}  y={50}  fontSize={30}  fontFamily={"arial"} fill={"black"} >Hello World!</text>
  6.     ,mySVG
  7. );
  8. //-local function to show svg source on page: React Root SVG Source---
  9. showSourceSVG()