Editar SVG con selectores CSS en C#

Los selectores CSS son una forma práctica de apuntar a elementos SVG concretos antes de editarlos. Con Aspose.SVG for .NET, el código C# puede usar QuerySelector() y QuerySelectorAll() para encontrar elementos por nombre de etiqueta, jerarquía, atributos o posición en el árbol SVG, y después actualizar atributos, reemplazar nodos o cambiar datos de ruta.

Este artículo usa la ilustración de ejemplo owl.svg. Los ejemplos seleccionan círculos y rutas en el SVG DOM y producen versiones editadas de la imagen vectorial original.

Flujo de edición con selectores CSS

Un flujo de edición basado en selectores suele tener cuatro pasos:

1. Cargar el archivo SVG de origen en un SVGDocument.
2. Usar QuerySelector() para un elemento o QuerySelectorAll() para una lista de elementos.
3. Actualizar atributos, estilos, texto, geometría o datos de ruta de los elementos seleccionados.
4. Guardar el documento SVG editado.

Para una introducción más breve a la navegación DOM, XPath y filtros de nodos, consulte Inspeccionar y navegar SVG en C#.

Seleccionar y editar elementos SVG

El primer ejemplo edita el archivo de origen owl.svg. La ilustración del búho está construida con elementos path y circle. El código usa selectores CSS para:

• encontrar elementos circle y cambiar sus atributos para hacer los ojos más grandes y azules;
• encontrar el elemento path que representa el ala y cambiar su apariencia.

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"));
}

Puede abrir el archivo SVG editado aquí: owl-edited1.svg.

Reemplazar elementos SVG seleccionados

El segundo ejemplo continúa con el mismo archivo de origen owl.svg. Selecciona los ojos redondos originales y los reemplaza por ojos cuadrados:

1. Crear un nuevo elemento <g> para los rectángulos de reemplazo.
2. Usar QuerySelectorAll("g:first-child > circle") para seleccionar los círculos del primer grupo.
3. Crear elementos <rect> con los atributos de tamaño y estilo necesarios.
4. Insertar los rectángulos en el nuevo grupo.
5. Eliminar del documento los elementos <circle> seleccionados.

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"));
}

Seleccionar una ruta y cambiar sus datos

La parte final cambia el ala del búho de una curva a una polilínea y vuelve a colorearla. El ejemplo selecciona el elemento path, actualiza los datos relacionados con la ruta y guarda el resultado:

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"));
}

La imagen compara el búho original y dos versiones editadas.

Puede abrir el segundo archivo SVG editado aquí: owl-edited2.svg.

FAQ

1. ¿Cuándo debo usar QuerySelector() en lugar de QuerySelectorAll()?
Use QuerySelector() cuando solo necesite el primer elemento coincidente. Use QuerySelectorAll() cuando todos los elementos coincidentes deban inspeccionarse o editarse, por ejemplo todos los círculos de un grupo.

2. ¿Los selectores CSS pueden cambiar elementos SVG por sí mismos?
No. Los selectores solo encuentran elementos. Después de seleccionar un elemento, use métodos y propiedades DOM como SetAttribute(), AppendChild(), RemoveChild() o propiedades SVG tipadas para realizar cambios.

3. ¿Las ediciones basadas en selectores pueden convertirse a PDF o imágenes?
Sí. Después de editar el SVGDocument, llame a Converter.ConvertSVG(document, options, outputPath) con las opciones de guardado adecuadas, o guarde primero el archivo SVG y conviértalo más tarde.

Próximos pasos

• Inspeccionar y navegar SVG en C# – aprenda recorrido DOM, XPath y filtros de nodos personalizados.
• Editar archivos SVG en C# – agregue formas, rutas y texto a documentos SVG.
• Convertir archivos SVG en C# – convierta archivos SVG editados a PDF, XPS y formatos de imagen.
• Cómo ejecutar los ejemplos – descargue y ejecute los ejemplos completos desde GitHub.