在 C# 中使用 CSS 选择器编辑 SVG

CSS 选择器是在编辑前定位特定 SVG 元素的实用方式。使用 Aspose.SVG for .NET，C# 代码可以通过 QuerySelector() 和 QuerySelectorAll() 按标签名、层级、属性或 SVG 树中的位置查找元素，然后更新属性、替换节点或修改路径数据。

本文使用示例插图 owl.svg。示例在 SVG DOM 中选择圆形和路径，并生成原始矢量图像的编辑版本。

CSS 选择器编辑流程

基于选择器的编辑流程通常有四个步骤：

1. 将源 SVG 文件加载到 SVGDocument。
2. 对单个元素使用 QuerySelector()，或对元素列表使用 QuerySelectorAll()。
3. 更新所选元素的属性、样式、文本、几何或路径数据。
4. 保存编辑后的 SVG 文档。

有关 DOM 导航、XPath 和节点过滤器的简短介绍，请参阅 在 C# 中检查和导航 SVG。

选择并编辑 SVG 元素

第一个示例编辑源文件 owl.svg。猫头鹰插图由 path 和 circle 元素构成。代码使用 CSS 选择器来：

• 查找 circle 元素并更改其属性，使眼睛更大并变为蓝色；
• 查找表示翅膀的 path 元素并更改其外观。

using Aspose.Svg;
using System.IO;
using Aspose.Svg.Dom;
using Aspose.Svg.Collections;

// Edit SVG elements with CSS selectors in C#

// Load an SVG document
using (SVGDocument document = new SVGDocument(new Url("https://docs.aspose.com/svg/files/owl.svg")))
{
    // Get the root <svg> element of the document
    SVGSVGElement svgElement = document.RootElement;

    // Find the first element that matches the specified in selector
    SVGGElement gElement = svgElement.QuerySelector("g") as SVGGElement;

    // Find all <circle> elements in a <g> element
    NodeList circleNodes = gElement.QuerySelectorAll("circle");

    // Make big blue eyes
    foreach (Node circleNode in circleNodes)
    {
        SVGCircleElement circleElement = circleNode as SVGCircleElement;
        circleElement.R.BaseVal.Value *= 1.5F;
        circleElement.SetAttribute("stroke", "blue");
    }

    // Get a path for the owl's wing
    SVGPathElement wingPath = gElement.QuerySelector("path:nth-child(2)") as SVGPathElement;

    // Apply style attributes to the wing
    wingPath.SetAttribute("stroke-width", "16");
    wingPath.SetAttribute("stroke-dasharray", "2 8");

    document.Save(Path.Combine(OutputDir, "owl-edited1.svg"));
}

您可以在此处打开编辑后的 SVG 文件： owl-edited1.svg。

替换选中的 SVG 元素

第二个示例继续使用同一个源文件 owl.svg。它选择原来的圆形眼睛，并将其替换为方形眼睛：

1. 为替换用的矩形创建新的 <g> 元素。
2. 使用 QuerySelectorAll("g:first-child > circle") 选择第一组中的圆形。
3. 创建带有所需尺寸和样式属性的 <rect> 元素。
4. 将矩形插入新组。
5. 从文档中删除选中的 <circle> 元素。

using Aspose.Svg;
using System.IO;
using Aspose.Svg.Dom;
using Aspose.Svg.Collections;

// Replace SVG circles with rectangles using CSS selectors in C#

// Load an SVG document
using (SVGDocument document = new SVGDocument(new Url("https://docs.aspose.com/svg/files/owl.svg")))
{
    // Get the root <svg> element of the document
    SVGSVGElement svgElement = document.RootElement;

    // Create a new <g> element with style attributes and append it as the last child of the <svg> element
    SVGGElement gElement = (SVGGElement)document.CreateElementNS(SvgNamespace, "g");
    gElement.SetAttribute("fill", "none");
    gElement.SetAttribute("stroke-width", "2");
    svgElement.AppendChild(gElement);

    // Find all <circle> elements from the first <g> element
    NodeList circleNodes = svgElement.QuerySelectorAll("g:first-child > circle");

    // Make square sky-blue eyes
    foreach (Node circleNode in circleNodes)
    {
        SVGCircleElement circleElement = circleNode as SVGCircleElement;

        float cx = circleElement.Cx.BaseVal.Value;
        float cy = circleElement.Cy.BaseVal.Value;
        float r = circleElement.R.BaseVal.Value;

        SVGRectElement rectElement = (SVGRectElement)document.CreateElementNS(SvgNamespace, "rect");
        rectElement.X.BaseVal.Value = cx - r;
        rectElement.Y.BaseVal.Value = cy - r;
        rectElement.Width.BaseVal.Value = 3 * r;
        rectElement.Height.BaseVal.Value = 3 * r;
        rectElement.SetAttribute("stroke", "SkyBlue");

        // Add a <rectangle> element into the second (new) <g> element and remove <circle> elements
        gElement.AppendChild(rectElement);
        circleElement.Remove();
    }
    // Recolor last rectangle in the second (new) <g> element
    Element lastRect = gElement.LastElementChild;
    lastRect.SetAttribute("stroke", "red");

    document.Save(Path.Combine(OutputDir, "owl-svg-eyes.svg"));
}

选择路径并更改其数据

最后一部分将猫头鹰的翅膀从曲线改为折线并重新着色。示例选择 path 元素，更新路径相关数据，并保存结果：

using Aspose.Svg;
using System.IO;
using Aspose.Svg.Dom;
using Aspose.Svg.Collections;

// Modify SVG path data selected with CSS selectors in C#

// Load an SVG document
using (SVGDocument document = new SVGDocument(Path.Combine(DataDir, "owl-svg-eyes.svg")))
{
    SVGSVGElement svgElement = document.RootElement;

    // Get a path for owl's body from the first <g> element
    Element bodyPath = (svgElement.QuerySelector("g:first-child") as SVGGElement).FirstElementChild;
    bodyPath.SetAttribute("stroke", "Teal");

    // Get a path for the owl's wing from the first <g> element
    SVGPathElement wingPath = svgElement.QuerySelector("g:first-child > path:nth-child(2)") as SVGPathElement;

    // Form new wing path data based on the old
    string d = "";
    foreach (SVGPathSeg pathSeg in wingPath.PathSegList)
    {
        if (pathSeg is SVGPathSegMovetoAbs)
        {
            SVGPathSegMovetoAbs pathSegMovetoAbs = pathSeg as SVGPathSegMovetoAbs;

            d += string.Format(" M {0} {1}", pathSegMovetoAbs.X, pathSegMovetoAbs.Y);
        }
        if (pathSeg is SVGPathSegCurvetoCubicAbs)
        {
            SVGPathSegCurvetoCubicAbs pathSegCurvetoCubicAbs = pathSeg as SVGPathSegCurvetoCubicAbs;

            d += string.Format(
                " L {0} {1} L {2} {3}",
                (pathSegCurvetoCubicAbs.X1 + pathSegCurvetoCubicAbs.X2) / 2F,
                (pathSegCurvetoCubicAbs.Y1 + pathSegCurvetoCubicAbs.Y2) / 2F,
                pathSegCurvetoCubicAbs.X,
                pathSegCurvetoCubicAbs.Y
            );
        }
    }
    // Set d attribute - new path data formation
    wingPath.SetAttribute("d", d.Trim());
    wingPath.SetAttribute("stroke", "Teal");

    document.Save(Path.Combine(OutputDir, "owl-edited2.svg"));
}

下图比较了原始猫头鹰图像和两个编辑后的版本。

您可以在此处打开第二个编辑后的 SVG 文件： owl-edited2.svg。

FAQ

1. 什么时候使用 QuerySelector() 而不是 QuerySelectorAll()？
当只需要第一个匹配元素时，请使用 QuerySelector()。当需要检查或编辑所有匹配元素时，请使用 QuerySelectorAll()，例如组中的所有圆形。

2. CSS 选择器能直接更改 SVG 元素吗？
不能。选择器只负责查找元素。选中元素后，请使用 SetAttribute()、AppendChild()、RemoveChild() 等 DOM 方法和属性，或使用类型化 SVG 属性来进行更改。

3. 基于选择器的编辑可以转换为 PDF 或图像吗？
可以。编辑 SVGDocument 后，使用合适的保存选项调用 Converter.ConvertSVG(document, options, outputPath)，也可以先保存 SVG 文件，再稍后转换。

后续步骤

• 在 C# 中检查和导航 SVG – 学习 DOM 遍历、XPath 和自定义节点过滤器。
• 在 C# 中编辑 SVG 文件 – 向 SVG 文档添加形状、路径和文本。
• 在 C# 中转换 SVG 文件 – 将编辑后的 SVG 文件转换为 PDF、XPS 和图像格式。
• 如何运行示例 – 从 GitHub 下载并运行完整示例。