隐藏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元素内的路径元素而发生的溢出。 如果我添加overflow：hidden到svg，那么路径包含在svg元素中，但我希望它包含在内部g元素中。

jsfiddle

Answer 1

尝试clip-path - ＆＃34;群组上的剪辑路径＆＃34;例。 您可以通过此方法设置任何形状以剪辑内容。