Modifier SVG avec des sélecteurs CSS en C#

Les sélecteurs CSS sont un moyen pratique de cibler des éléments SVG précis avant de les modifier. Avec Aspose.SVG for .NET, le code C# peut utiliser QuerySelector() et QuerySelectorAll() pour trouver des éléments par nom de balise, hiérarchie, attributs ou position dans l’arbre SVG, puis mettre à jour des attributs, remplacer des nœuds ou modifier des données de chemin.

Cet article utilise l’illustration d’exemple owl.svg. Les exemples sélectionnent des cercles et des chemins dans le DOM SVG et produisent des versions modifiées de l’image vectorielle d’origine.

Flux de modification avec des sélecteurs CSS

Un flux d’édition basé sur des sélecteurs comprend généralement quatre étapes:

1. Charger le fichier SVG source dans un SVGDocument.
2. Utiliser QuerySelector() pour un élément ou QuerySelectorAll() pour une liste d’éléments.
3. Mettre à jour les attributs, styles, textes, géométries ou données de chemin des éléments sélectionnés.
4. Enregistrer le document SVG modifié.

Pour une introduction plus courte à la navigation DOM, XPath et aux filtres de nœuds, consultez Inspecter et naviguer dans SVG en C#.

Sélectionner et modifier des éléments SVG

Le premier exemple modifie le fichier source owl.svg. L’illustration du hibou est construite avec des éléments path et circle. Le code utilise des sélecteurs CSS pour:

• trouver les éléments circle et modifier leurs attributs afin d’agrandir les yeux et de les rendre bleus;
• trouver l’élément path qui représente l’aile et modifier son apparence.

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

Vous pouvez ouvrir le fichier SVG modifié ici: owl-edited1.svg.

Remplacer des éléments SVG sélectionnés

Le deuxième exemple continue avec le même fichier source owl.svg. Il sélectionne les yeux ronds d’origine et les remplace par des yeux carrés:

1. Créer un nouvel élément <g> pour les rectangles de remplacement.
2. Utiliser QuerySelectorAll("g:first-child > circle") pour sélectionner les cercles du premier groupe.
3. Créer des éléments <rect> avec les attributs de taille et de style requis.
4. Insérer les rectangles dans le nouveau groupe.
5. Supprimer les éléments <circle> sélectionnés du document.

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

Sélectionner un chemin et modifier ses données

La dernière partie transforme l’aile du hibou d’une courbe en polyligne et la recolore. L’exemple sélectionne l’élément path, met à jour les données liées au chemin et enregistre le résultat:

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

L’image compare le hibou d’origine et deux versions modifiées.

Vous pouvez ouvrir le deuxième fichier SVG modifié ici: owl-edited2.svg.

FAQ

1. Quand utiliser QuerySelector() plutôt que QuerySelectorAll()?
Utilisez QuerySelector() lorsqu’un seul premier élément correspondant est nécessaire. Utilisez QuerySelectorAll() lorsque tous les éléments correspondants doivent être inspectés ou modifiés, par exemple tous les cercles dans un groupe.

2. Les sélecteurs CSS peuvent-ils modifier des éléments SVG par eux-mêmes?
Non. Les sélecteurs ne font que trouver des éléments. Une fois l’élément sélectionné, utilisez des méthodes et propriétés DOM comme SetAttribute(), AppendChild(), RemoveChild() ou des propriétés SVG typées pour effectuer les changements.

3. Les modifications basées sur des sélecteurs peuvent-elles être converties en PDF ou en images?
Oui. Après avoir modifié le SVGDocument, appelez Converter.ConvertSVG(document, options, outputPath) avec les options d’enregistrement adaptées, ou enregistrez d’abord le fichier SVG et convertissez-le ensuite.

Étapes suivantes

• Inspecter et naviguer dans SVG en C# – découvrir le parcours DOM, XPath et les filtres de nœuds personnalisés.
• Modifier des fichiers SVG en C# – ajouter des formes, des chemins et du texte aux documents SVG.
• Convertir des fichiers SVG en C# – convertir des fichiers SVG modifiés en PDF, XPS et formats d’image.
• Comment exécuter les exemples – télécharger et exécuter les exemples complets depuis GitHub.