时间戳

首页 > 解决方案 > 将包含在 div 中的粘性 SVG 元素定位为溢出

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

问题描述

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

为了使事情稍微复杂化，我希望position: sticky在另一个 SVG 元素中div使用overflow:auto. 我创建了一个示例，说明我要在此代码框内实现的目标。

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

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

标签： reactjssvgreact-redux

解决方案

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>

推荐阅读