Question

如果我将SVG元素渲染为已定义的SVG对象，那么一切都很好。

如果我渲染整个SVG对象，则生成的图像将无法缩放。

如果您看下面的演示，则第一个svg会正确呈现。 svg填充了浏览器的宽度，并且一切都会缩放。

第二个svg是300x150的图像，完全没有缩放比例。

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

我无法通过Chrome的检查器在呈现的html中找到任何区别。

Answer 1

从viewBox删除括号

private void OnTriggerEnter(Collider other)
{
   if(!other.CompareTag("Player")) return;

   Destroy(gameObject);

}

Answer 2

我是个白痴。将“视图框”更改为“ viewBox”，将“字体大小”更改为“ fontSize”。

为什么React会以不同的方式渲染这些SVG？

2 个答案: