Редактирование SVG через CSS-селекторы в C#

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 и фильтры узлов смотрите в статье Инспекция и навигация SVG в C#.

Выбор и редактирование 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-элементы?
Нет. Селекторы только находят элементы. После выбора элемента используйте DOM-методы и свойства, например SetAttribute(), AppendChild(), RemoveChild() или типизированные SVG-свойства, чтобы внести изменения.

3. Можно ли конвертировать SVG после редактирования через селекторы?
Да. После редактирования SVGDocument вызовите Converter.ConvertSVG(document, options, outputPath) с подходящими параметрами сохранения или сначала сохраните SVG-файл, а затем конвертируйте его.

Дальнейшие шаги

• Инспекция и навигация SVG в C# – изучите DOM-обход, XPath и пользовательские фильтры узлов.
• Редактирование SVG-файлов в C# – добавляйте фигуры, пути и текст в SVG-документы.
• Конвертация SVG-файлов в C# – конвертируйте отредактированные SVG-файлы в PDF, XPS и графические форматы.
• Как запускать примеры – скачайте и запустите полные примеры из GitHub.