html - 隐藏 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 - “剪辑组上的路径”示例。您可以通过此方法设置任何形状来剪辑内容。