样式和缩放svg地图

Question

//function returns a new svg from using path d attribute passed to the function

svgMap = (mapData) => {
    const source = `
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 6" height="150" width="150" transform="scale(2)">
  <path fill="#bad9e3" d='${mapData.path}'/>
  </svg>`;
    const optimizedSVGDataURI = svgToMiniDataURI(source);
    return <Image src={optimizedSVGDataURI} />;
    
    }
    
   
 //inside react component render method
 render() return ( 
 <Table.Row>
    <Table.Cell className="map-inline">
    {this.svgMap(mapData)}
    </Table.Cell> 
 </Table.Row>)
 

我有包含svg路径的数据。如何在svg视图框中动态居中放置路径。

我想将svg贴图定位在行的中心。问题与确定viewBox值的方式有关。当前正在强制使用值，我需要一种动态生成视图框的方法来使svg地图居中。