Hide overflow for inner g element inside svg element

Question

I have following 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 to clip/hide any overflow which is happening due to path element inside parent g element with class focus. If I add overflow:hidden to svg then the path is contained inside svg element but instead I want it to be contained inside the inner g element.

jsfiddle

Answer 1

Try clip-path - "Clip Paths on Groups" example. You can set any shape to clip content by this method.