Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Hide overflow for inner g element inside svg element

Tags:

html

css

svg

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

like image 848
r0h1t4sh Avatar asked Jun 10 '15 06:06

r0h1t4sh


1 Answers

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

like image 126
Philip Dernovoy Avatar answered Oct 15 '22 07:10

Philip Dernovoy