Matplotlib SVG Filter Line

Introduction

Ce laboratoire montre comment utiliser les effets de filtrage SVG avec Matplotlib. Les effets de filtrage ne sont efficaces que si votre lecteur SVG les prend en charge.

Conseils sur la machine virtuelle

Une fois le démarrage de la machine virtuelle terminé, cliquez dans le coin supérieur gauche pour basculer vers l'onglet Carnet d'adresses pour accéder au carnet Jupyter pour pratiquer.

Parfois, vous devrez peut-être attendre quelques secondes pour que le carnet Jupyter ait fini de charger. La validation des opérations ne peut pas être automatisée en raison des limitations du carnet Jupyter.

Si vous rencontrez des problèmes pendant l'apprentissage, n'hésitez pas à demander à Labby. Donnez votre feedback après la session, et nous résoudrons rapidement le problème pour vous.

Importation des bibliothèques requises

Tout d'abord, nous devons importer les bibliothèques requises : matplotlib.pyplot, io et xml.etree.ElementTree.

import io
import xml.etree.ElementTree as ET
import matplotlib.pyplot as plt
import matplotlib.transforms as mtransforms

Créer une figure et un axe

Nous créons un objet figure avec plt.figure() et ajoutons un objet axe à l'aide de fig1.add_axes(). Nous définissons également la taille et la position de l'axe à l'aide de [0,1, 0,1, 0,8, 0,8].

fig1 = plt.figure()
ax = fig1.add_axes([0.1, 0.1, 0.8, 0.8])

Tracer des lignes

Nous traçons deux lignes à l'aide de ax.plot(). Nous personnalisons également les lignes avec différentes couleurs, marqueurs et étiquettes.

l1, = ax.plot([0.1, 0.5, 0.9], [0.1, 0.9, 0.5], "bo-", mec="b", lw=5, ms=10, label="Line 1")
l2, = ax.plot([0.1, 0.5, 0.9], [0.5, 0.2, 0.7], "rs-", mec="r", lw=5, ms=10, label="Line 2")

Dessiner des ombres

Nous dessinons des ombres pour les lignes en utilisant les mêmes lignes avec un léger décalage et des couleurs grises. Nous ajustons la couleur et le zorder des lignes d'ombre de sorte qu'elles soient dessinées en dessous des lignes d'origine. Nous utilisons également la méthode offset_copy() pour créer une transformation de décalage pour les lignes d'ombre.

for l in [l1, l2]:
    xx = l.get_xdata()
    yy = l.get_ydata()
    shadow, = ax.plot(xx, yy)
    shadow.update_from(l)

    shadow.set_color("0.2")
    shadow.set_zorder(l.get_zorder() - 0.5)

    transform = mtransforms.offset_copy(l.get_transform(), fig1, x=4.0, y=-6.0, units='points')
    shadow.set_transform(transform)

    shadow.set_gid(l.get_label() + "_shadow")

Définir les limites de l'axe et enregistrer la figure

Nous définissons les limites x et y de l'axe et enregistrons la figure sous forme de chaîne de caractères binaire au format SVG à l'aide de io.BytesIO() et plt.savefig().

ax.set_xlim(0., 1.)
ax.set_ylim(0., 1.)

f = io.BytesIO()
plt.savefig(f, format="svg")

Définir un filtre

Nous définissons un filtre pour un flou gaussien en utilisant les balises <defs> et <filter> avec l'attribut stdDeviation.

filter_def = """
  <defs xmlns='http://www.w3.org/2000/svg'
        xmlns:xlink='http://www.w3.org/1999/xlink'>
    <filter id='dropshadow' height='1.2' width='1.2'>
      <feGaussianBlur result='blur' stdDeviation='3'/>
    </filter>
  </defs>
"""

Lire et modifier un SVG

Nous lisons le SVG enregistré à l'aide de ET.XMLID() et insérons la définition du filtre dans l'arbre DOM du SVG à l'aide de tree.insert(). Nous récupérons ensuite l'élément SVG avec l'ID donné et appliquons le filtre d'ombre à l'aide de shadow.set().

tree, xmlid = ET.XMLID(f.getvalue())

tree.insert(0, ET.XML(filter_def))

for l in [l1, l2]:
    shadow = xmlid[l.get_label() + "_shadow"]
    shadow.set("filter", 'url(#dropshadow)')

fn = "svg_filter_line.svg"
print(f"Saving '{fn}'")
ET.ElementTree(tree).write(fn)

Sommaire

Dans ce laboratoire, nous avons montré comment utiliser les effets de filtrage SVG avec Matplotlib. Nous avons appris à créer une figure et des axes, à tracer des lignes et des ombres, à définir les limites des axes et à définir et appliquer des filtres à un SVG.