Hide overflow for inner g element inside svg element

I have an SVG structure

<svg class="ps-chart-svg" width="100%" viewBox="0 0 1039 792.4571428571428" preserveAspectRatio="xMidYMid">
  <g transform="translate(0,0)">
    <g class="focus" style="overflow:hidden" transform="translate(45,30)">
      <path class="line" d="..." fill="none" stroke="black"></path>
    </g>
  </g>
</svg>

      

        
        
        
      

    

What I would like to do is copy / hide any overflow that occurs due to the path element inside the parent g element with the focus of the class. If I add overflow: hidden in the svg, then the path is contained inside the svg element, but instead I want it to be contained inside the inner g-element.

jsfiddle