svg如何在此react组件中居中？

Question

这是我的示例代码：

import React from "react";
import ReactDOM from "react-dom";

type AssetProps = {
  className?: string,
  style?: any
};

const SVG_CIRCLE =
  '<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><path d="M 5 7 C 6.105 7 7 6.105 7 5 C 7 3.895 6.105 3 5 3 C 3.895 3 3 3.895 3 5 C 3 6.105 3.895 7 5 7 Z"></path></svg>';

const createAsset = (gylph: string) => (props: AssetProps) => (
  <div {...props} dangerouslySetInnerHTML={{ __html: gylph }} />
);

const Circle = createAsset(SVG_CIRCLE);

function App() {
  return (
    <div className="App">
      <h1>Here are some circles</h1>
      <h2>
        <Circle />
      </h2>
      <h2>
        <Circle
          style={{
            fill: "blue",
            width: "50px",
            height: "50px",
            border: "1px solid blue"
          }}
        />
      </h2>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

这是结果：

即使每边的大小设置为50px，SVG图形也不会展开。

即使我从width="10" height="10"中删除了SVG_CIRCLE，也没有任何效果。如何在此React组件中缩放SVG？

编辑：

我已将SVG行更改为const SVG_CIRCLE = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><path d="M 5 7 C 6.105 7 7 6.105 7 5 C 7 3.895 6.105 3 5 3 C 3.895 3 3 3.895 3 5 C 3 6.105 3.895 7 5 7 Z"></path></svg>';

以下是codeandbox上的代码示例的链接：https://codesandbox.io/s/jz2pp3w33