Почему React отрисовывает эти SVG по-разному?

Question

Если я рендеринг элементов SVG в определенный объект SVG, то все хорошо.

Если я отрисовываю весь объект SVG, полученное изображение не масштабируется.

Если вы посмотрите на следующую демонстрацию, 1-й svg рендерится правильно. Svg заполняет ширину браузера и все масштабируется.

Второй svg - это изображение размером 300x150, которое вообще не масштабируется.

https://codepen.io/brunnock/pen/ydMdgv

// The following renders as expected.
function SVG1() {
  return (
    <g>
      <rect height="100%" width="100%" fill="#ccc" />
      <circle cx={150} cy={75} r={50} fill="red" />
      <text x="100" y="275" font-size="50">
        This is the right size.
      </text>
    </g>
  );
}
// svg1 is a predefined svg element in the HTML file.
ReactDOM.render(<SVG1 />, svg1);

// The following renders a 300x150 image that doesn't scale.
function SVG2() {
  return (
    <svg viewbox={"0 0 600 600"}>
      <rect height="100%" width="100%" fill="#ccc" />
      <circle cx={150} cy={75} r={50} fill="red" />
      <text x="100" y="275" font-size="50">
        This is not the right size.
      </text>
    </svg>
  );
}
// svg2 is a div.
ReactDOM.render(<SVG2 />, svg2);

Я не смог найти никакой разницы в отображаемом html через инспектор Chrome.

Answer 1

Я идиот. Измените «viewbox» на «viewBox» и «font-size» на «fontSize».

Answer 2

Удалить скобки из окна просмотра

function SVG2() {
  return (
    <svg viewbox="0 0 600 600">
      <rect height="100%" width="100%" fill="#ccc" />
      <circle cx={150} cy={75} r={50} fill="red" />
      <text x="100" y="275" font-size="50">
        This is not the right size.
      </text>
    </svg>
  );
}