Is it possible to stretch a imageOverlay in leafle

问题:

I am making a leafletjs based application and I want the user to be able to 'draw' a svg image on the map. To accomplish this I am tracking the mousedown and mouseup events to define the imageBounds and using an imageOverlay to draw a svg image.

I want the svg image to be stretched so it completely fits the defined imageBounds, but instead is it scaled so it fits within the imageBounds without distorting the aspect ratio.

Is there a way to enable imageOverlays to ignore their original aspect ratio and stretch to fit in the imageBounds?

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

EDIT: Tried to do the same thing with a bitmap image instead and it does stretch, so it seams to be a SVG specific thing.

回答1:

I figured it out. It was not a leaflet problem but an inherent SVG behaviour. To allow a SVG to stretch while scaling I added the preserveAspectRatio="none" attribute to the SVG root node.

For anybody looking for more information on SVG scaling: https://css-tricks.com/scale-svg/