Question

有没有一种方法可以在SVG中使用position: sticky？与this示例的工作方式类似。

为了使问题复杂化，我希望在position: sticky与另一个div内的SVG元素内使用overflow:auto。我创建了一个示例，说明了我在this codesandbox内部要实现的目标。

编辑1：不确定这是否有所不同，但是对于我自己的应用程序中的上下文，我正在使用react＆react-redux包括/排除形状以形成图形。要求是在滚动冻结标题/行时以与Excel相同的方式滚动时，将某些元素保留在视图端口的顶部。

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

Answer 1

不。 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>

将包含在div中的粘性SVG元素定位为溢出

1 个答案: