title: SVG rect goes to new position when wrapped in div with React
body: <p>I am new to React, and I am having trouble with some formatting issues. </p>
  
  <p>I have one react component, an SVG that is the background element. On it, I am trying to render several points, with annotations when you hover.</p>
  
  <p>I am able to get the points to show when I simply return the point directly, but I need to wrap it in a div so I can add some text. </p>
  
  <p><strong>Working</strong>, rendering the point in the right place:</p>
  
  <pre><code>    class InfoPoint extends Component {
        render() {
          return (
            &lt;rect x="10" y="93" width="15" height="12" rx="2" ry="2" fill="red" &gt;&lt;/rect&gt;
          );
        }
      }
  </code></pre>
  
  <p><strong>Not working</strong>, I cannot find the element when I wrap it in the div:</p>
  
  <pre><code>   class InfoPoint extends Component {
        render() {
          return (
            &lt;div className="point"&gt;
            &lt;rect x="10" y="93" width="15" height="12" rx="2" ry="2" fill="red" &gt;&lt;/rect&gt;
           &lt;/div&gt;
          );
        }
      }
  </code></pre>