当我将高度限制为100vh并且溢出y时，SVG textPath将不会滚动：滚动ReactJs

如何解决当我将高度限制为100vh并且溢出y时，SVG textPath将不会滚动：滚动ReactJs

我有一个布局，其中标题栏在屏幕的左侧是垂直的，如下所示：

<div className="page-container" >     // row flexBox
  <div className="header">
    <button onClick={logoutHandler}>logout</button>
  </div>
  <div className="page-content">  // column flexBox
    <h1>heading</h1>
    <div className="Feed">
      data.map(item => {
        return (
          <Component />
        )
      })
    </div>
  </div>
</div>

该组件内部具有SVG文本路径标题（除其他外），如下所示：

...
<svg>
  <path id='testo' style={{ fill: 'none',stroke: 'none',height: '500px',width: '500px' }} d="
                        M 27,95
                        C 75 -30,305 -15,285 175
                    "/>
  <text>
    <textPath xlinkHref='#testo'>
      {item.title}
    </textPath>
  </text>
</svg>
...

当我在数据中映射项目时，它将创建足够的组件，从而使y轴上的视图高度溢出。我的页眉的高度为100vh，因此当我向下滚动时，其螺丝会与布局保持一致。我以为将div“页面容器”限制为100vh的高度并隐藏y，然后对div“页面内容”执行相同的操作，但溢出-y：滚动。但是，当我向下滚动时，除了SVG textPath标头之外，组件中的所有内容都将滚动。它保持固定在后台。我认为这真的很奇怪，因为当我不限制视线高度时，它与组件一起正常滚动，并且事实是它位于组件内部。

这是我第一次使用SVG pathText，它是否有固有的特性导致我可以解决此问题？还是应该考虑不限制viewheight并将标题更改为fixed。我想虽然可以修复。谢谢。