定位包含在 div 内的粘性 SVG 元素，并带有溢出

Question

有没有办法在SVG中使用position: sticky？类似于此示例的工作方式。

为了使问题稍微复杂化，我希望在另一个带有overflow:auto的div的 SVG 元素中使用position: sticky。我创建了一个我试图在这个代码沙箱中实现的示例。

编辑 1： 不确定这是否有区别，但对于我自己的应用程序中的上下文，我正在使用 react 和 react-redux 来包含/排除形状以形成图形。要求是在滚动时将某些元素保留在视图端口的顶部，就像 Excel 冻结标题/行时一样。

编辑 2：更新了沙盒以包含答案的代码

Answer 1

No.position是仅适用于 HTML 元素的属性。它在 SVG 中无效。

你需要使用Javascript。 添加一个 onscroll 事件处理程序来监视滚动并重新定位 SVG 元素。

window.addEventListener("scroll", function(evt) {
document.getElementById("sticky-rect").setAttribute("y", screenYtoSVGUnits(window.scrollY) + 10);
});
// Converts a screen Y position to SVG units which have a viewBox transform
function screenYtoSVGUnits(val) {
const svg = document.getElementById("mysvg");
let pt = svg.createSVGPoint();
pt.x = 0;
pt.y = val;
pt = pt.matrixTransform(svg.getCTM().inverse());
return pt.y;
}

<svg id="mysvg" viewBox="0 0 100 500">
<line x1="0" y1="0" x2="100" y2="500" stroke="black" stroke-width="1"/>
<rect id="sticky-rect" x="0" y="10" width="100" height="10" fill="red"/>
</svg>