стилизация и масштабирование svg map

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.В настоящее время форсирую значения, и мне нужен динамический способ генерации viewbox для центрирования карты svg.