Matplotlib SVG Filter Line

Einführung

In diesem Lab wird gezeigt, wie man SVG-Filtereffekte mit Matplotlib verwendet. Die Filtereffekte sind nur dann wirksam, wenn Ihr SVG-Renderer sie unterstützt.

Tipps für die VM

Nachdem die VM gestartet ist, klicken Sie in der oberen linken Ecke, um zur Registerkarte Notebook zu wechseln und Jupyter Notebook für die Übung zu nutzen.

Manchmal müssen Sie einige Sekunden warten, bis Jupyter Notebook vollständig geladen ist. Die Validierung von Vorgängen kann aufgrund von Einschränkungen in Jupyter Notebook nicht automatisiert werden.

Wenn Sie bei der Lernphase Probleme haben, können Sie Labby gerne fragen. Geben Sie nach der Sitzung Feedback ab, und wir werden das Problem für Sie prompt beheben.

Importieren der erforderlichen Bibliotheken

Zunächst müssen wir die erforderlichen Bibliotheken importieren: matplotlib.pyplot, io und xml.etree.ElementTree.

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

Erstellen einer Figur und Achsen

Wir erstellen ein Figurobjekt mit plt.figure() und fügen ein Achsenobjekt hinzu, indem wir fig1.add_axes() verwenden. Wir legen auch die Größe und Position der Achse mit [0.1, 0.1, 0.8, 0.8] fest.

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

Zeichnen von Linien

Wir zeichnen zwei Linien mit ax.plot(). Wir passen auch die Linien mit unterschiedlichen Farben, Markern und Beschriftungen an.

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

Zeichnen von Schatten

Wir zeichnen Schatten für die Linien, indem wir die gleichen Linien mit einem geringen Offset und grauen Farben verwenden. Wir passen die Farbe und die Z-Reihenfolge der Schattenlinien an, sodass sie unter den ursprünglichen Linien gezeichnet werden. Wir verwenden auch die offset_copy()-Methode, um eine Offset-Transformation für die Schattenlinien zu erstellen.

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

Festlegen der Achsengrenzen und Speichern der Figur

Wir legen die x- und y-Grenzen für die Achsen fest und speichern die Figur als Byte-String im SVG-Format mit io.BytesIO() und plt.savefig().

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

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

Filter definieren

Wir definieren einen Filter für einen Gaußschen Verblendungseffekt mit den <defs>- und <filter>-Tags und dem stdDeviation-Attribut.

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>
"""

SVG lesen und modifizieren

Wir lesen das gespeicherte SVG mit ET.XMLID() und fügen die Filterdefinition in den SVG-DOM-Baum ein mit tree.insert(). Anschließend greifen wir das SVG-Element mit der angegebenen ID auf und wenden den Schattenfilter an mit 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)

Zusammenfassung

In diesem Lab wurde gezeigt, wie SVG-Filtereffekte mit Matplotlib verwendet werden. Wir haben gelernt, wie man eine Figur und Achsen erstellt, Linien und Schatten zeichnet, Achsengrenzen setzt und Filter für ein SVG definiert und anwendet.