在svg元素内隐藏内部g元素的溢出

Question

我有以下SVG结构

<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>

我想做的就是剪辑/隐藏由于父g元素内具有类焦点的path元素而发生的任何溢出。如果我将overflow：hidden添加到svg，则该路径包含在svg元素内，但我希望它包含在内部g元素内。

jsfiddle

Answer 1

尝试Clip-path - “剪辑组上的路径”示例。您可以通过此方法设置任何形状来剪辑内容。