Cut off line paths when moving outside of svg axis

Question

I made a line chart with svelte and at the bottom of the chart there is a slider where one can change the date. When using the slider, the paths go outside and cross the y axis and then disappear when the paths are outside the svg. However, I want the lines to disappear when the paths cross the y-axis.

I am not sure what I jave to tweak to make it work. I tweaked the margins and tried to put the paths into a div but nothing has worked yet.

Here is the repl

Answer 1

In general, you can define a rect that your graph should live in as a clipPath and reference that in the clip-path of the graph visuals.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="80" height="80" viewBox="0 0 80 80"
   version="1.1"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <defs>
    <!-- Defines clipping area -->
    <clipPath
       clipPathUnits="userSpaceOnUse"
       id="clip-path">
      <rect x="12" y="10" width="55" height="56"  />
    </clipPath>
  </defs>
  <g>
    <!-- Line is from x = 0 to x = 80, but clipped. -->
    <path
       style="fill:none;stroke:#ff0000;stroke-width:1;"
       d="M 0,57 80,23"
       clip-path="url(#clip-path)" /> <!-- Clips object -->
    <path
       style="fill:none;stroke:#000000;stroke-width:1;"
       d="M 12,12 V 68 H 68"/>
  </g>
</svg>