Position sticky SVG element contained inside div with overflow

Question

Is there a way to a way to use position: sticky inside SVG? Similar to how this example work.

To complicate the matter slightly, I am looking to use position: sticky inside an SVG element inside another div with overflow:auto. I have a created an example of what I am trying to achieve inside this codesandbox.

Edit 1: Not sure whether this makes a difference, but for context in my own application I am using react & react-redux to include/exclude shapes to form a graph. The requirement is to keep some elements at the top of the view port when scrolling the same way Excel would if you would to freeze a header/row.

Edit 2: Updated the sandbox to include the answer's code

Answer 1

No. position is a property that only applies to HTML elements. It is not valid inside an SVG.

You would need to use Javascript. Add an onscroll event handler to watch the scroll and reposition the SVG element.

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>