Matplotlib SVG 필터 효과 | 파이썬 프로그래밍 튜토리얼

소개

이 랩에서는 Matplotlib 을 사용하여 SVG 필터 효과를 사용하는 방법을 보여줍니다. 필터 효과는 SVG 렌더러가 이를 지원하는 경우에만 유효합니다.

VM 팁

VM 시작이 완료되면, 왼쪽 상단을 클릭하여 Notebook 탭으로 전환하여 실습을 위해 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

Figure 및 Axes 생성

plt.figure()를 사용하여 figure 객체를 생성하고, fig1.add_axes()를 사용하여 axes 객체를 추가합니다. 또한 [0.1, 0.1, 0.8, 0.8]을 사용하여 axes 의 크기와 위치를 설정합니다.

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

선 그리기

ax.plot()을 사용하여 두 개의 선을 그립니다. 또한 서로 다른 색상, 마커 및 레이블로 선을 사용자 정의합니다.

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

그림자 그리기

약간의 오프셋과 회색 색상을 사용하여 동일한 선에 대한 그림자를 그립니다. 원래 선 아래에 그림자 선이 그려지도록 그림자 선의 색상과 zorder 를 조정합니다. 또한 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")

축 범위 설정 및 그림 저장

io.BytesIO() 및 plt.savefig()를 사용하여 축의 x 및 y 범위를 설정하고 그림을 SVG 형식의 바이트 문자열로 저장합니다.

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

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

필터 정의

<defs> 및 <filter> 태그와 stdDeviation 속성을 사용하여 가우시안 블러 (Gaussian blur) 에 대한 필터를 정의합니다.

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 읽기 및 수정

ET.XMLID()를 사용하여 저장된 SVG 를 읽어들이고, 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 필터링 효과를 사용하는 방법을 시연했습니다. 그림 (figure) 과 축 (axes) 을 생성하고, 선과 그림자를 그리고, 축 제한을 설정하고, SVG 에 필터를 정의하고 적용하는 방법을 배웠습니다.

Matplotlib SVG 필터 라인

소개