Czy można rozciągnąć imageOverlay w ulotce?

Question

Tworzę aplikację opartą na leafletjs i chcę, aby użytkownik mógł "narysować" obraz svg na mapie. Aby to osiągnąć, śledzę zdarzenia mousedown i mouseup, aby zdefiniować imageBounds i użyć imageOverlay do narysowania obrazu svg.

Chcę, aby obraz svg był rozciągnięty, aby całkowicie pasował do zdefiniowanego imageBounds, ale zamiast tego jest skalowany tak, aby pasował do imageBounds bez zniekształcania proporcji.

Czy istnieje sposób na włączenie opcji imageOverlays w celu zignorowania ich oryginalnych proporcji i rozciągnięcia w celu dopasowania do imageBounds?

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

EDIT: Próbowałem zrobić to samo z bitmapy zamiast i robi stretch, więc szwy być SVG specyficzna sprawa.

Answer 1

Wymyśliłem to. To nie był problem z ulotkami, ale nieodłączne zachowanie SVG. Aby umożliwić rozciągnięcie SVG podczas skalowania, dodałem atrybut preserveAspectRatio="none" do węzła głównego SVG.

Dla każdego, kto szuka więcej informacji na temat skalowania SVG: https://css-tricks.com/scale-svg/