Matplotlib SVG フィルタリング効果 | Python プログラミングチュートリアル

はじめに

この実験では、Matplotlib を使って SVG フィルタリング効果をどのように使うかを示します。SVG レンダラがサポートしている場合のみ、フィルタリング効果が有効になります。

VM のヒント

VM の起動が完了したら、左上隅をクリックしてノートブックタブに切り替え、Jupyter Notebook を使って練習しましょう。

時々、Jupyter Notebook が読み込み完了するまで数秒待つ必要がある場合があります。Jupyter Notebook の制限により、操作の検証を自動化することはできません。

学習中に問題がある場合は、Labby にお問い合わせください。セッション後にフィードバックを提供してください。すぐに問題を解決いたします。

必要なライブラリをインポートする

まず、必要なライブラリをインポートする必要があります。matplotlib.pyplot、io および xml.etree.ElementTree です。

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

グラフと軸を作成する

plt.figure() を使ってグラフオブジェクトを作成し、fig1.add_axes() を使って軸オブジェクトを追加します。また、[0.1, 0.1, 0.8, 0.8] を使って軸のサイズと位置を設定します。

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

線を描画する

ax.plot() を使って 2 本の線を描画します。また、線を異なる色、マーカー、ラベルでカスタマイズします。

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

影を描画する

わずかなオフセットと灰色の同じ線を使って、線に影を描画します。影の線の色と z 順序を調整して、元の線の下に描画されるようにします。また、影の線用のオフセット変換を作成するために offset_copy() メソッドを使います。

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

軸の範囲を設定してグラフを保存する

軸の x と y の範囲を設定し、io.BytesIO() と plt.savefig() を使ってグラフを SVG 形式のバイト文字列として保存します。

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

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

フィルタを定義する

<defs> と <filter> タグを使って 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>
"""

SVG を読み込んで変更する

保存した SVG を ET.XMLID() を使って読み込み、tree.insert() を使って SVG DOM ツリーにフィルタ定義を挿入します。その後、与えられた ID の SVG 要素を取得し、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)

まとめ

この実験では、Matplotlib で SVG フィルタ効果を使用する方法を示しました。グラフと軸を作成し、線と影を描画し、軸の範囲を設定し、SVG にフィルタを定義して適用する方法を学びました。

Matplotlib SVG フィルタリングライン