I don't know how to add a mask to a line using svg .net like this:
<svg height="210" width="500">
<mask id="myMask">`
<rect x="0" y="0" width="50" height="50" fill="white" />
<rect x="170" y="150" width="50" height="50" fill="white" />
</mask>
<line x1="0" y1="0" x2="200" y2="200" style="stroke:gray;stroke-width:2" stroke-dasharray="5, 5" />
<line x1="0" y1="0" x2="200" y2="200" style="stroke:blue;stroke-width:2" mask="url(#myMask)"/>
</svg>
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>