ズーム可能なSVGを実装する方法の解説 | 株式会社カブク

ソフトウェアエンジニアの畠山です。今回は，SVGに対して"Pan"と"Zoom"を実装する方法を解説します。 PanとZoomのためのライブラリはsvg-pan-zoomなどがありますが，今回はこういったライブラリを使用しないで実装してみます。 ※ Google Chrome 69でしか動作検証していません。 SVGのviewBox まず最初に，svgタグのviewBox属性についておさらいしておきます。なぜならこのviewBoxを使ってPanとZoomを実現するからです．viewBox属性は”min-x”, “min-y”, “width”, “height” の4つの数値リストをスペース区切り（もしくはカンマ区切り）で指定します． 例えば，viewBox属性に[min-x min-y width height] = [0 0 100 100] を指定すると以下のようになります。 <sv

[efcl]

SVGのズーム処理