2015-11-24 16 views
6

Sto creando un'applicazione basata su leaflet e voglio che l'utente sia in grado di "disegnare" un'immagine svg sulla mappa. Per fare ciò sto monitorando gli eventi mouse e mouse per definire gli imageBounds e usando un'immagineOverlay per disegnare un'immagine SVG.È possibile allungare un'immagine Overlay in un opuscolo?

Desidero che l'immagine svg sia stirata in modo che si adatti completamente all'immagine definitaBounds, ma invece è ridimensionata in modo che si adatti all'immagineBounds senza distorcere le proporzioni.

C'è un modo per consentire a imageOverlays di ignorare le proporzioni originali e allungare per adattarsi in imageBounds?

imageBounds = [southwest, northeast]; 
_tempShape = L.imageOverlay(_imageUrl, imageBounds); 
_tempShape.addTo(_map); 

EDIT: Ho cercato di fare la stessa cosa con un'immagine bitmap invece e lo fa tratto, quindi cuciture ad essere una cosa specifica SVG.

risposta

0

L'ho capito. Non era un problema di volantino ma un comportamento SVG intrinseco. Per consentire a un SVG di allungarsi durante il ridimensionamento, ho aggiunto l'attributo preserveAspectRatio="none" al nodo radice SVG.

Per chi cerca maggiori informazioni sul ridimensionamento SVG: https://css-tricks.com/scale-svg/