Editer des elements SVG avec des selecteurs CSS en Python

Reponse rapide: Pour editer des elements SVG avec des selecteurs CSS en Python, chargez le fichier avec SVGDocument, trouvez une cible editable avec Element.query_selector() ou plusieurs noeuds avec Element.query_selector_all(), mettez a jour les attributs sur un seul element trouve ou le contenu au niveau noeud comme text_content sur plusieurs correspondances, puis enregistrez le SVG.

1from aspose.svg import SVGDocument
2
3with SVGDocument("document.svg") as document:
4    element = document.root_element.query_selector("#target")
5    if element is not None:
6        element.set_attribute("fill", "#2e86de")
7    document.save("edited.svg")

Les selecteurs CSS sont utiles lorsqu’un fichier SVG possede des IDs, classes, attributs ou groupes imbriques significatifs. L’idee est simple: ecrire un selecteur qui pointe vers l’element SVG a editer, mettre a jour cet element et enregistrer le document.

Dans cet article, vous apprendrez a:

editer un element SVG par ID avec query_selector();
mettre a jour le contenu textuel de plusieurs noeuds trouves avec query_selector_all();
utiliser des selecteurs d’attributs limites lorsqu’un selecteur large correspondrait a trop d’elements;
eviter d’appeler des API d’attributs propres a Element sur des listes de noeuds retournees par des requetes a plusieurs correspondances.

Cet article se concentre sur les flux d’edition bases sur les selecteurs. Pour une inspection plus large du document, le parcours de l’arbre et des exemples XPath, consultez Naviguer dans SVG en Python.

SVG d’exemple utilise dans les exemples

Cet article utilise le fichier d’exemple css-selectors-edit.svg. Vous pouvez l’enregistrer comme data/css-selectors-edit.svg avant d’executer les exemples. Le SVG d’exemple contient trois petits groupes editables: #badge, #status-card et #chart. Les exemples ci-dessous montrent comment les selecteurs pointent vers des parties SVG reelles avant que le code les modifie.

#badge-bg trouve un cercle par son ID.
.label trouve toutes les etiquettes de texte ayant la meme classe.
#status-card circle[fill] trouve le point de statut, et #chart .bar[data-level='high'] trouve la barre haute du graphique.

Comment editer des elements SVG avec des selecteurs CSS en Python

Utilisez ce flux lorsqu’un fichier SVG possede des IDs, classes, attributs ou groupes imbriques stables:

Chargez le fichier SVG avec SVGDocument.
Choisissez le selecteur le plus etroit qui identifie la cible, comme #id, .class, tag[attribute] ou un selecteur limite dans un groupe.
Utilisez query_selector() pour un element editable lorsque vous avez besoin de set_attribute().
Utilisez query_selector_all() seulement pour des editions sures au niveau noeud sur plusieurs correspondances, comme text_content.
Enregistrez le SVG edite et verifiez que le selecteur n’a pas affecte des elements non lies.

Editer un element SVG par ID

Un selecteur ID est l’option la plus simple et la plus sure lorsque l’element cible est unique. L’exemple suivant trouve le cercle avec id="badge-bg", modifie fill, stroke et stroke-width, puis enregistre le SVG edite sous css-selector-edit-by-id.svg. Utilisez ce modele pour les SVG de modele ou les objets importants ont des IDs stables.

 1import os
 2from aspose.svg import SVGDocument
 3
 4input_folder = "data/"
 5output_folder = "output/"
 6input_path = os.path.join(input_folder, "css-selectors-edit.svg")
 7output_path = os.path.join(output_folder, "css-selector-edit-by-id.svg")
 8os.makedirs(output_folder, exist_ok=True)
 9
10with SVGDocument(input_path) as document:
11    badge_background = document.root_element.query_selector("#badge-bg")
12
13    if badge_background is not None:
14        badge_background.set_attribute("fill", "#2e86de")
15        badge_background.set_attribute("stroke", "#0d47a1")
16        badge_background.set_attribute("stroke-width", "5")
17
18    document.save(output_path)

L’image ci-dessous compare le SVG source (a) a css-selector-edit-by-id.svg (b). Seuls la couleur et le contour du cercle selectionne par #badge-bg changent; la carte de statut, le graphique et les etiquettes restent inchanges.

SVG original et resultat edite apres modification du cercle badge par ID

Editer plusieurs noeuds de texte SVG par classe

Utilisez query_selector_all() lorsque la meme edition au niveau noeud doit s’appliquer a chaque correspondance. Le SVG d’exemple utilise class="label" sur toutes les etiquettes de texte. L’exemple suivant trouve toutes les etiquettes et met a jour leur contenu textuel.

 1import os
 2from aspose.svg import SVGDocument
 3
 4input_folder = "data/"
 5output_folder = "output/"
 6input_path = os.path.join(input_folder, "css-selectors-edit.svg")
 7output_path = os.path.join(output_folder, "css-selector-edit-labels.svg")
 8os.makedirs(output_folder, exist_ok=True)
 9
10with SVGDocument(input_path) as document:
11    labels = document.root_element.query_selector_all(".label")
12
13    for label in labels:
14        label.text_content = label.text_content.upper()
15
16    document.save(output_path)

La sortie modifie le texte de chaque noeud de texte SVG avec la classe label. C’est l’exemple principal pour plusieurs noeuds dans l’article: il utilise query_selector_all() pour le flux de selecteurs et evite d’appeler Element.set_attribute() sur des elements NodeList.

L’image ci-dessous compare le SVG source (a) au resultat enregistre sous css-selector-edit-labels.svg (b). Toutes les etiquettes passent en majuscules, tandis que les formes, fill, stroke et les barres du graphique restent identiques. Le focus visuel reste ainsi sur l’edition de texte basee sur les classes.

SVG original et resultat edite apres modification de noeuds de texte SVG par classe

Utiliser des selecteurs d’attributs limites

Les selecteurs d’attributs limites sont utiles lorsqu’un selecteur large correspondrait a trop d’elements. L’exemple suivant edite deux cibles differentes dans un meme flux: le point de statut selectionne par #status-card circle[fill] et la barre haute du graphique selectionnee par #chart .bar[data-level='high'].

 1import os
 2from aspose.svg import SVGDocument
 3
 4input_folder = "data/"
 5output_folder = "output/"
 6input_path = os.path.join(input_folder, "css-selectors-edit.svg")
 7output_path = os.path.join(output_folder, "css-selector-edit-scoped-attributes.svg")
 8os.makedirs(output_folder, exist_ok=True)
 9
10with SVGDocument(input_path) as document:
11    warning_dot = document.root_element.query_selector("#status-card circle[fill]")
12    high_bar = document.root_element.query_selector("#chart .bar[data-level='high']")
13
14    if warning_dot is not None:
15        warning_dot.set_attribute("fill", "#d32f2f")
16        warning_dot.set_attribute("stroke", "#8b0000")
17        warning_dot.set_attribute("stroke-width", "4")
18
19    if high_bar is not None:
20        high_bar.set_attribute("fill", "#455a64")
21        high_bar.set_attribute("opacity", "1")
22
23    document.save(output_path)

Le premier selecteur trouve un cercle uniquement dans #status-card et seulement si ce cercle possede un attribut fill. Le second selecteur trouve la barre du graphique dont la valeur data-level est high. La sortie doit afficher un point de statut rouge et une barre haute sombre.

L’image ci-dessous compare le SVG source (a) a css-selector-edit-scoped-attributes.svg (b). Les selecteurs limites mettent a jour deux cibles separees sans changer le badge ni les barres inferieures du graphique. C’est le principal avantage de combiner groupe, classe, balise et conditions d’attribut.

SVG original et resultat edite apres modification du point de statut et de la barre haute du graphique

Erreurs courantes et solutions

Pour les mises a jour d’attributs, preferez query_selector() avec un selecteur qui pointe vers un element editable. Pour du texte repete ou des changements au niveau noeud, utilisez query_selector_all() et traitez chaque noeud retourne. Gardez les selecteurs stables: les IDs sont les meilleurs pour des parties uniques de modele, les classes sont utiles pour des etiquettes repetees et les selecteurs limites evitent de modifier des elements similaires dans d’autres groupes.

Probleme	Solution
Une seule cible change	`query_selector()` retourne seulement la premiere correspondance. Utilisez `query_selector_all()` pour des editions de plusieurs noeuds comme la modification de `text_content`; utilisez `query_selector()` lorsque le code doit appeler `set_attribute()`.
`set_attribute()` echoue dans une boucle `query_selector_all()`	Les elements NodeList peuvent ne pas exposer `Element.set_attribute()`. Utilisez des editions au niveau noeud comme `text_content`, ou `query_selector()` lorsque vous devez definir des attributs.
Le selecteur ne retourne rien	Inspectez la source SVG et verifiez les vrais ID, classes, noms de balises et valeurs d’attributs.
Le selecteur d’attribut ne correspond pas	Commencez par un selecteur de presence d’attribut comme `circle[fill]`, puis ajoutez des filtres de valeur seulement apres que le selecteur simple fonctionne.
Un selecteur de classe large change trop d’elements	Ajoutez du contexte, par exemple `#chart .bar[data-level='high']`, pour limiter l’edition a un groupe.
Le fichier de sortie est inchange	Enregistrez le document edite et ouvrez le chemin de sortie, pas le fichier d’entree d’origine.

FAQ

Puis-je utiliser des selecteurs CSS pour editer SVG en Python?

Oui. Chargez le SVG avec SVGDocument, trouvez une cible editable avec query_selector() et mettez-la a jour avec set_attribute(). Utilisez query_selector_all() lorsque vous devez traiter tous les noeuds correspondants avec une edition au niveau noeud, comme la modification de text_content.

Quelle est la difference entre query_selector() et query_selector_all()?

query_selector() retourne le premier element correspondant et convient lorsque le code doit appeler set_attribute(). query_selector_all() retourne une NodeList de toutes les correspondances et sert aux editions au niveau noeud, comme la modification de text_content sur chaque noeud de texte trouve.

Puis-je selectionner des elements SVG par classe?

Oui. Utilisez un selecteur de classe comme .label. Pour plusieurs noeuds de texte, query_selector_all(".label") peut mettre a jour text_content pour chaque correspondance. Pour definir des attributs, utilisez un selecteur limite avec query_selector().

Puis-je selectionner des elements SVG par attributs?

Oui. Les selecteurs d’attributs comme circle[fill] ou .bar[data-level='high'] peuvent cibler des elements SVG selon des attributs existants. Limitez-les avec un ID de groupe lorsque le meme motif apparait a plusieurs endroits.

Dois-je utiliser des selecteurs CSS ou XPath pour editer SVG?

Utilisez les selecteurs CSS pour les IDs, classes, attributs et editions simples dans un groupe. Utilisez XPath lorsque la requete depend d’une structure de document plus complexe ou de relations entre noeuds.