如何用滚动条类控件平移SVG视口？FluentSlider定位求助

需求与已实现逻辑 #

• 我的SVG内容分布在0->1000×0->1000的区域，通过修改viewBox参数实现视口平移查看内容：
  • 设置viewBox="0 0 500 500"可显示左上角四分之一区域
  • 设置viewBox="250 250 500 500"可显示中间区域，这部分逻辑已正常工作

已实现代码 #

SVG部分：

<svg viewbox="@svgViewBox"...... >.....</svg>

后端绑定逻辑：

private string SvgViewBox => $"{PanHorizontal} {PanVertical} {ViewBoxWidth} {ViewBoxHeight}";

当前问题 #

我想用FluentSlider作为滚动条，分别绑定PanHorizontal（水平平移）和PanVertical（垂直平移）参数，实现拖动滑块切换SVG显示区域，但无法将滑块合理定位：

• 垂直滑块需要放在SVG右侧
• 水平滑块需要放在SVG下方
  尝试调整FluentSlider的位置属性后没有效果，完全找不到头绪。

提问 #

这是CSS布局问题吗？如果是，该如何将FluentSlider控件分别放置在SVG的右侧和下方？请给出具体的解决思路。

内容的提问来源于stack exchange，提问作者Jamie_M_