如何将剪切路径的文本相对于视口居中并显示所有剪切路径的文本？

这是我的React组件演示：https : //codesandbox.io/s/epic-brown-osiq1，我现在使用viewBox的值，getBBox并getBoundingClientRect()实现一些计算以定位元素。目前，我已根据控制台从getBoundingClientRect()日志中提供给我的收益输入了原始值。你可以看到，我已经实现了的元素getBoundingClientRect()上，即的根元素和clip-path的text的元素。更好，但text更多的地方是将屏幕的中心真正对准text框的中心，您可以看到“ So”一词位于“ Food”一词的开头，而不是对准的box的中心。所以我目前在这一点上。

注意：您会在沙箱中看到一些评论，这些评论提供了我的部分信息或以前的试用版。 我的代码是什么？具体来说，我显示的clip-path是带有一些动画面板的文本，这些动画面板在clip-path-上移动- color_panel_group's element可以使构图具有动态感。后面还带有阴影text可以使构图更深。

期望：显示一个clip-path的text响应定位在垂直和水平的视口的中心。

问题：我clip-path隐藏了的一部分，text而我尝试将元素相对于视口居中的操作却很费劲。

我曾尝试：我曾尝试与元素的宽度和发挥x-主要元素的位置text，clip-path，symbol和这两个案例。甚至尝试use通过在其中实现某个类来使用该元素，但最终却得到了非常近似的结果。同样，在tspan和中，symbol我也尝试使用x的属性，再次取得了非常近似的结果。我尝试过使用position absolute-主要是relative container直接在SVGCSS选择器上使用-仍然具有近似结果。

我想知道我缺少什么。也许有人可以对我的代码的行为做出一些解释？

这是我第二次演示的结果代码（大约是React组件生成的代码）：

body {
  background: orange;
}

svg {
  background: green;
  display: block;
  margin: auto;
  position: relative;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

.component {
  min-width: 100vw;
  min-height: 100vh;
  font-size: 100%;
}

.fade_in_background {
  opacity: 1;
  visibility: visible;
  transition: all 1.5s ease-out 0s;
}

.brandtype {
  margin: auto;
  text-align: center;
}

.brandtype_use {
  position: absolute;
  transform: translate(-112.65px, 0)
}

.clipPath_text {
  text-align: center;
}

.color_panel_group {
  padding: 25px;
}

.shape_animation {
  transform-origin: 0;
  transform: scale(0, 1) translate(0, 0);
  animation: moving-panel 3s 1.5s 1 alternate forwards;
}

.shadow {
  transform: translate(10px, 10px)
}

.shape_animation_shadow {
  fill: black;
  fill-opacity: .505;
  transition: all 1.3s ease-out 0.3s;
}

.brandtype {
  font-size: 6.8em;
}

@keyframes moving-panel {
  to {
    transform: scale(1, 1) translate(20px, 0);
  }
}