如何使用SVG.NET为线条添加遮罩？

要实现你给出的原生SVG遮罩效果，用SVG.NET可以按以下步骤编写代码：

核心实现代码 #

using Svg;

// 初始化SVG文档
var svg = new SvgDocument { Width = "500", Height = "210" };

// 创建遮罩并添加到defs中
var mask = new SvgMask { ID = "myMask" };
// 添加遮罩内的两个白色矩形
mask.Children.Add(new SvgRectangle
{
    X = 0,
    Y = 0,
    Width = 50,
    Height = 50,
    Fill = SvgColourServer.White
});
mask.Children.Add(new SvgRectangle
{
    X = 170,
    Y = 150,
    Width = 50,
    Height = 50,
    Fill = SvgColourServer.White
});
svg.Defs.Children.Add(mask);

// 创建灰色参考虚线
svg.Children.Add(new SvgLine
{
    StartX = 0,
    StartY = 0,
    EndX = 200,
    EndY = 200,
    Stroke = new SvgColourServer(SvgColor.Gray),
    StrokeWidth = 2,
    StrokeDashArray = new SvgUnitCollection { 5, 5 }
});

// 创建应用遮罩的蓝色线条
var blueLine = new SvgLine
{
    StartX = 0,
    StartY = 0,
    EndX = 200,
    EndY = 200,
    Stroke = new SvgColourServer(SvgColor.Blue),
    StrokeWidth = 2
};
// 设置遮罩引用
blueLine.Attributes["mask"] = "url(#myMask)";
svg.Children.Add(blueLine);

// 输出SVG字符串或保存到文件
string svgString = svg.GetXML();
// svg.Save("masked-line.svg");

关键说明 #

• 遮罩元素SvgMask必须添加到SVG的Defs集合中，和原生SVG的写法逻辑一致
• 遮罩内的元素需用白色填充，因为遮罩中白色区域会显示下方图形，黑色区域会隐藏对应部分
• 给蓝色线条设置mask属性时，直接用url(#myMask)引用已创建的遮罩ID，和原生SVG的属性规则对应

内容的提问来源于stack exchange，提问作者omar franco