Interacting with SVG
function Diagram({width=800, height=250}) {
const [isDark, setDark] = React.useState(false);
const classes = "diagram" + (isDark ? " dark" : "");
const viewBox = `0 0 ${width} ${height}`;
return <svg className={classes} viewBox={viewBox}>
<rect className="background"
x="0" y="0" width={width} height={height}
onClick={() => setDark(dm => !dm)}
/>
<TextBox x="50" y="65">Box One</TextBox>
<TextBox x="300" y="65">Box Two</TextBox>
<TextBox x="550" y="65">Box Three</TextBox>
</svg>;
}