How to clip?

[micsova]

I understand how clipping is supposed to work, but I am struggling to actually use it programatically. I have an SvgEllipse (a simple circle) and several SvgRectangles. I only want to render the parts of the rectangles that are within the circle.
I know I need to use the circle to clip the rectangles (presumably with an SvgClipPath?) but can't figure out how to actually set that in my code. Any assistance would be greatly appreciated

[omarifr]

Hi, I did it like this. The area in the clip would be the part visible.

 var rectangle = new SvgPolygon();
            var group = new SvgGroup();

            var clip2 = new SvgClipPath
            {
                ID = "Clip2",
                Children =
                {
                    new SvgRectangle()
                    {
                        X = 0,
                        Y = 0,
                        Width = 40,
                        Height = 40
                    }
                }
            };

            group.Children.Add(clip2);
            group.Children.Add(rectangle);
            rectangle.ClipPath =  new Uri("url(#Clip2)", UriKind.Relative);

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xml="http://www.w3.org/XML/1998/namespace" width="989" height="162" viewBox="0, 0, 100, 100">  
  <g stroke-width="1" font-family="Roboto" font-size="8" font="Roboto" fill-opacity="0" groupName="TopChord" style="stroke:black;">
    <g>
      <clipPath id="Clip2">
        <rect x="0" y="0" width="40" height="40" />
      </clipPath>
      <polygon points="10,20 10,60 90,60 90,20" clip-path="url(#Clip2)" id="0" stroke-width="1" fill-opacity="1" />
    </g>
  </g>
</svg>