Reactjs 为什么React会以不同的方式呈现这些SVG？

如果我将SVG元素呈现给定义的SVG对象，那么一切都很好

如果渲染整个SVG对象，则生成的图像不会缩放

如果您查看以下演示，第一个svg将正确呈现。svg填充浏览器的宽度，所有内容都可以缩放

第二个svg是一个300x150的图像，根本不可缩放

//以下按预期呈现。
函数SVG1（）{
返回(
这是合适的尺寸。
);
}
//svg1是HTML文件中预定义的svg元素。
render（，svg1）；
//下面将渲染不缩放的300x150图像。
函数SVG2（）{
返回(
这个尺码不对。
);
}
//svg2是一个div。
render（，svg2）；

---

我无法通过Chrome的inspector在呈现的html中找到任何差异。

从视图框中删除括号

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（）{
返回(
这个尺码不对。
);
}

我是个白痴。将“查看框”更改为“查看框”，将“字体大小”更改为“字体大小”。

刚刚选中。似乎没有什么不同。另一方面，将“viewbox”更改为“viewbox”会起作用。该死@Sean Brunnock是的，这里的语法很重要，我自己也掉进了这个陷阱：-）

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>
  );
}