Zoom y panorámica de JavaScript para el objeto SVG-SVG-pan-zoom-Container

Vista prévia

Descripción

Un plugin de JavaScript ligero vainilla que permite zoom y funciones de panorámica en un objeto SVG.

Con este plugin, sus usuarios son capaces de acercar/alejar la imagen SVG en línea con la rueda del ratón, y panoramizar la imagen SVG en línea con el ratón arrastrar.

¿Cómo funciona?

Instalación:

# Yarn
$ yarn add svg-pan-zoom-container

# NPM
$ npm install svg-pan-zoom-container --save

Importe el SVG-pan-zoom-Container en el documento.

import { pan, zoom, getScale, setScale, resetScale } from 'svg-pan-zoom-container';

<-- or from a cdn -->
<script src="https://unpkg.com/svg-pan-zoom-container"></script>

Habilite las funcionalidades de zoom y panorámica en el objeto SVG agregando el siguiente atributo al contenedor principal.

<div data-zoom-on-wheel


 data-pan-on-drag>


 <svg>



 SVG Elements Here


 </svg>
</div>

Opciones posibles para la funcionalidad de zoom SVG.

<div data-zoom-on-wheel="zoom-amount: 0.002; min-scale: 1; max-scale: 10; scaling-property: 'width/height'">


 <svg>



 SVG Elements Here


 </svg>
</div>

Especifique el botón del ratón que desea arrastrar. Predeterminado: izquierda.

<div data-pan-on-drag="button: right">


 <svg>



 SVG Elements Here


 </svg>
</div>

Registro de cambios

v0.1.3 (03/30/2019)

• Arreglado: error preventDefault () en Chrome